Set up an After Effects animation to animate when it scrolls into view.
This is tiny cardboard box. We animated it in After Effects. It has its own theme song. But, we’ll make it animate on the web, so the box opens when it scrolls into view and closes when the box scrolls out of view. To do this, we’ll bring the animation into the page, we’ll set up the trigger, then we’ll animate that box based on when it scrolls into view.
For the Lottie animation, we have that right here in our Assets panel. We exported this using Bodymovin. This example project has two sections. Let’s place this Lottie animation between each of them. Now, each section is the height of our viewport so we can make this cardboard box small. Really small. Smaller. Even smaller. That’s the first part. Let’s set up the trigger. Over in Interactions, this is where we can add that trigger. And we’re going to be setting this up on the element itself. This animation should be triggered when the selected element, which is our Lottie animation, when that scrolls into view. So we’ll select that option.
Final part, animation. How do we want this to work? Well, when our selected element scrolls into view, we want the action to be this, we want the Lottie animation to begin. So if we scroll to the top of the page, and go over to preview this, when the cardboard box scrolls into view it animates open, just like we’d expect. But, if we scroll back up, and then down again, it’s still open. That’s expected. But what if we go out of preview mode? What if we control our Lottie animation, our Lottie playback, to occur when the element scrolls back out of view. We can even reverse it, so the box animates back to being closed. And in case someone might miss it, we can add offset. What happens if we add 10 percent offset when it’s scrolled into view, and what if we do the same thing when it’s scrolled out of view? Let’s preview so we can see exactly what’s going on, starting at the top. If we scroll a tiny bit, the box is closed. It’s not until it hits that ten percent mark, that it animates open. And, if we scroll back to where it’s out of view, when it’s ten percent away from being out of view, the animation will play in reverse, just like we told it to. So, we added a Lottie animation, selected our scroll-based trigger, and set up two animations, one when it scrolls into view, and another when it scrolls out of view. That’s tiny cardboard box.
As part of our series on After Effects and Lottie in Webflow, we created tiny cardboard box that we animated in After Effects. In this tutorial, we’ll set up the box to animate on the web so it opens when it scrolls into view and close when it scrolls out of view.
We’ll do this in 3 steps:
You’ll need to export your Lottie animation from After Effects and upload it to your Webflow project. We exported the box using Bodymovin. Learn how to do this in steps 3 and 4 of our Full walkthrough tutorial.
For this project, you’ll need to set up two sections — check out our Section tutorial or clone the project.
To find and add the animation, click the photo icon in the Assets panel from the left toolbar and drag the box onto the Canvas between the two sections.
Because each section is the height of our viewport, let’s size our cardboard box really small (about 100 pixels).
Step 1 complete! Let’s set up the trigger.
Before we add our trigger, we want to make sure the animation (not another element) is selected.
We want the animation to be triggered when the selected element (our Lottie animation, the box) scrolls into view. From the Interactions panel on the right toolbar, open the Element trigger menu and choose Scroll into view.
Stay put in that Interactions panel to set up the animation in our final step.
When our selected element scrolls into view, we want the Lottie animation to begin.
From the Interactions panel under When scrolled into view, choose Lottie Playback from the Action menu.
If we scroll to the top of the page and click preview (the eye in the top left), you’ll see the cardboard box animates open when it’s scrolled into view — just like we’d expect. But if we scroll back up and then down again, the box is still open.
So what we want to do next is set up our Lottie animation to occur and reverse (so the box animates back to being closed) when the box scrolls back out of view. To do this, on the Interactions panel under When scrolled out of view, choose Lottie Playback from the Action menu. And to animate the box back to being closed, choose Reverse.
After all this hard work, we want to make sure this animation isn’t missed — let’s add an offset so the animation isn’t triggered until it hits a certain point on the page. While you’re still in the Interactions panel, add a 10% Offset to both When scrolled into view and When scrolled out of view.
Now when you hit preview, start at the top and scroll a tiny bit, you’ll see the box is closed … until it hits that 10% mark when it animates open. And, if we scroll back to where it’s out of view, when it’s 10% away from being out of view, the animation will play in reverse, just like we told it to. Go us!
We added a Lottie animation, selected our scroll-based trigger, and set up 2 animations: one when it scrolls into view, and another when it scrolls out of view. Which means you just successfully set up an element to animate when it scrolls into and out of view.
High fives all around!
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback