Overview of After Effects and Lottie in Webflow
Learn how to create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.
Full course, plus downloadable assets: https://wfl.io/after-effects-lottie Blog post: https://webflow.com/blog/after-effects-and-lottie-meet-webflow
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Video transcript
Overview of After Effects and Lottie in Webflow introduces the workflow for creating and embedding Lottie animations on Webflow sites. Lottie is an animation format that lets you play After Effects animations on the web as lightweight, resolution-independent vector animations.
The general workflow is: design and animate in After Effects, export the animation as a JSON file using the Bodymovin plugin, and then embed the JSON in your Webflow site using the Lottie element or a Code Embed.
Lottie animations are significantly smaller in file size than video and scale perfectly at any size — making them well suited for UI animations, loading indicators, hero illustrations, and icon animations.
In Webflow, the Lottie element (found in the Add panel under Media) lets you upload the JSON file and configure playback: auto-play, loop, hover trigger, scroll-triggered, or click-triggered. You can also use Webflow's interactions to control Lottie playback as part of a larger animation sequence.
This video provides the conceptual overview for a series of lessons that go deeper into each part of the After Effects → Bodymovin → Webflow workflow.
