Sync Lottie with scroll

The scrolling effect is activated as soon as the animation enters the viewport.

You may position the Lottie anywhere on your website and the Lottie will seek frame by frame as you scroll down the website.

<script>
LottieInteractivity.create({
player:'#firstLottie',
mode:"scroll",
    actions: [
    {
        visibility:[0, 1.0],
        type: "seek",
        frames: [0, 300],
    },
    ]
});
</script>

See the Pen <a href="https://codepen.io/Osbro/pen/KKZZvqN"> Lottie-Interactivity - Sync Lottie with scroll - zendesk [locked]</a> by Osbro (<a href="https://codepen.io/Osbro">@Osbro</a>) on <a href="https://codepen.io">CodePen</a>.

Sync Lottie with scroll

Was this article helpful?

Comments

<%= previousTitle %>

<%= nextTitle %>

In this article

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Categories

Toggle navigation menu

<%= category.name %>

Search

Was this article helpful?

<%= previousTitle %>

<%= nextTitle %>

In this article

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Categories

Toggle navigation menu

<%= category.name %>

Categories