How to Add a Lottie Animation in Webflow
Learn how to add a Lottie animation in Webflow: upload the JSON, enable autoplay and loop, and control it with Interactions.
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a Lottie animation in Webflow.
1. Download your Lottie animation
Find an animation on LottieFiles or export your own from After Effects. Download the JSON file (or dotLottie).
2. Add the Lottie element in Webflow
In the Designer, drag the Lottie Animation element from the Add Elements panel. In Settings, click Upload JSON and upload your animation file.
3. Set up playback options
In the Lottie element Settings: Autoplay (automatic playback), Loop (loop playback), Speed (playback speed, 1 = normal). For animations triggered on scroll or click, use Webflow Interactions instead of autoplay.
4. Control it with Interactions (optional)
To trigger the animation on scroll or hover, create a Webflow Interaction. Select your Lottie element as the target and choose the Lottie Animation action: set the start and end frames based on scroll progress.
Conclusion
Lottie in Webflow integrates natively, no code needed. For lighter alternatives: make an element spin forever.
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
