Add Adobe After Effects animations to your Webflow sites by uploading Lottie JSON files and controlling their playback with Webflow’s wide range of interaction triggers — all without looking at a line of code.
Hi PH! 👋
When Adobe Flash was killed in 2010, the web lost a powerful animation engine. Creators looking to bring highly visual animations that one typically saw in movie trailers were left with nothing but jQuery.animate().
Things changed when Airbnb released Lottie in 2017, making it seamless for developers to take After Effects animations and render them on the web and iOS and Android devices — but if a designer wants to get them on their site, they’ll still need to use code to control those animations on their site.
The code to get a Lottie animation playing on your site is straightforward enough, but when you want more advanced, trigger-based playback (on click, on hover, on scroll, etc.), you’ll need to use increasingly complex JavaScript to put those ideas into practice.
Webflow brings the Lottie implementation process into the visual realm, letting you take advantage of our animation triggers — like scroll position, mouse movement, click, page loads, and more — to precisely control and customize the playback of these animations.
We’re excited to see what everyone builds with this, and are happy to open Webflow up to the already amazing community of After Effects and Lottie animators who have done so much to make the web just a bit more fun and beautiful.
Happy designing!
The Freelancer's Journey
Script 2 Time