How to Add a Lottie Animation in Webflow

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.