How this Lottie integration works

After Effects animations … on Webflow sites. Awesome — but how does it actually work? Here’s the gist:

1. Add the bodymovin plugin to After Effects, then export your animations as Lottie JSON files 
2. Upload Lottie JSON files to Webflow
3. Control playback of Lottie animations with the power of Webflow interactions

To dive deeper into using this for your Webflow projects, check out our series of new Lottie course on Webflow University.

Why we built this integration

We created this After Effects/Lottie integration with Webflow for 2 core reasons: 

1. Improved animation performance

Webflow’s existing interactions and animations toolset is pretty powerful, and we’ve seen some truly wild sites built with it. But it has its limits.

Ultimately, if you’re trying to create sophisticated animations with lots of moving parts, animating traditional HTML and CSS elements in Webflow can get complicated fast. Plus, large and complex animations in Webflow can seriously weigh a page down, creating slow page loads or incomplete experiences for users on slower connections.

After Effects, on the other hand, is a tool designed explicitly for creating sophisticated, complex animations, so it can be a lot more efficient than trying to do it all in Webflow. Additionally, After Effects animations, when served on websites as Lottie JSON files, are exponentially lighter and more performant than animations created with standard HTML and CSS elements. 

2. Empowering more without code

Beyond these practical, performance-driven reasons, we also wanted to take the work of Airbnb’s design team a step further and empower even more people to add After Effects animations to their sites via Lottie — but without requiring them to write a line of JavaScript.

The release of Lottie in 2017 did a lot to give designers and animators more precise control over animations on the web, iOS, and Android, making it as simple as handing their developers a JSON file to “drop in” to the right place in the app or website. But still, this implementation process remains developer-driven, requiring detailed knowledge of JavaScript to achieve anything beyond basic playback.

Today’s integration with Webflow interactions brings this implementation process into a completely visual, code-free tool, and lets designers, animators (and, yes, developers!) go from concept to published web animation using only visual tools.

What you can build

Pro tip: for a closer look at these animations and more learning materials, check out our course on Webflow University (more details below).

Page loading animations

Want to create an engaging animation to show your visitors before the page loads? Simple: pick your After Effects animation and control its playback with an interaction based on when the page finishes loading.

Scroll animations

Animate an After Effects file as you scroll down the page can be a great way to showcase that cute penguin in the rain animation you’ve been saving up.

Click-based animations

Take your calls to action to the next level with an interactive animation on click.

Animated image sequences on scroll

Bonus example: take a video from Cinema 4D, import it as an image sequence to After Effects, export it via bodymovin, then embed it on your Webflow site using the canvas rendering mode. Then, animate it on scroll. Boom!