How this Lottie integration works
After Effects animations … on Webflow sites. Awesome — but how does it actually work? Here’s the gist:
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
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.
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.
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!
A video tutorial for each one that shows you how to add it your site and control its playback with Webflow interaction
A cloneable Webflow site with the animation
New to After Effects? The course also features an introduction to After Effects video that covers the basics of creating an animation and exporting it as Lottie file.
Want to find more After Effects animations to feature on your sites, or just play around with? We’ve partnered with our friends at LottieFiles, an awesome community of animators who make their work available for free download and use under a Creative Commons license, on a curated set of animations for Webflow users. They’ve also just released a free web editor that lets you customize the colors of animation layers before exporting — super cool.
More on After Effects and Lottie
If you want to dive into the world of After Effects for the first time, we recommend checking out some tutorials on vector animations. And if you’d like to learn more about the creation of Lottie by Airbnb, the best place to start is their original announcement post.
We can’t wait to see what you build with this new integration. Let us know what you create in the comments!