How to animate an element while scrolling — After Effects & Lottie in Webflow

Sometimes the page is really, really long. And a lot of times we want something to animate
only as that something is in view, in other words, we only want this animation to animate
while we can see it. So in this example, we’re going to have
three sections. The first and last sections will take up 300
percent of the viewport height, they’re set to 300 VH. Why such a ridiculously long number? Because we want to simulate a really long
page. And the middle section, it’s set to only
100 percent of the viewport height. So we’ll cover this in three parts. We’ll drag in our Lottie asset, we’ll
set up the scroll-based trigger, and finally we’ll configure the animation. Let’s start with the asset. First things first, from our Assets panel,
let’s drag in the animation, and we’ll place it in our middle section, the second
of the three sections. Okay, that’s part one. Part two is setting up the trigger. Over in interactions, let’s make sure our
animation is selected, and our goal is to have this animation happen as we scroll while
the element is in view. So, we’ll select that option. That’s part two. Part three is where we turn this thing into
a reality. Let’s add an animation. And, in that animation, let’s add our first
action. This is like a keyframe, and when the animation
is 0 percent scrolled into view, we want to hold right at the beginning of the Lottie
animation. 0 percent is where the animation begins, but
at a hundred percent, by the time the Lottie animation has scrolled past our screen, out
of view, this is where we want the animation to reach the end. And, once we’ve done that, we can turn on
live preview, or go over to preview mode, and the animation progresses as it’s scrolling
in view. Now, the pattern here with After Effects and
Lottie is pretty straightforward: drop in the Lottie asset, set up your trigger, and
configure the animation. But that’s a scroll-based Lottie animation
in the Webflow designer.


Add a Comment

Your email address will not be published. Required fields are marked *