Animate an element 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.