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:
- Add the animation
- Set up the trigger
- Set up the animation
Add the animation
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.
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.
Set up the animation
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!
