Play animation when visible

This section shows an example of a Lottie that is playing when visible. Visibility can be customised to play the animation when a percentage of the container is reached. Here [0.50, 1.0] means the animation will play when 50% of the container is reached, [0, 1.0] will play as soon as the container is visible.

<script>
LottieInteractivity.create({
    player:'#twelfthLottie',
    mode:"scroll",
    actions: [
        {
        visibility: [0.50, 1.0],
        type: "play"
        }
    ]
});
</script>