How do I add a Lottie animation in Webflow?

Add the file, then place the Lottie element

A Lottie animation is a JSON file, or a dotLottie file, that plays as a vector animation. Webflow does not draw the animation for you. You upload a file you already have, then place it with the Lottie animation element.

A Lottie JSON file can be exported from After Effects with the bodymovin plugin, or downloaded from LottieFiles. A dotLottie file can be converted from JSON, exported with the LottieFiles plugin, or downloaded from LottieFiles.

Upload the file before you try to drop it on the page. Open the Assets panel, click the cloud upload icon, and select the file. Webflow's Assets article says you cannot drag a dotLottie file from your computer onto the canvas, because of a browser limit. Upload that file through the Assets panel instead.

To place it, open the Add panel, go to Media, and drag Lottie animation onto the canvas. Select the element, click Replace Lottie sequence, and choose the JSON or dotLottie file in Assets. A JSON file can also be dragged from the Assets panel onto the canvas. Use the element when you want to pick the file yourself.

Example: a pricing row needs a small checkmark that draws itself when the visitor reaches that row. Upload checkmark.json, place one Lottie element in the row, and connect it with Replace Lottie sequence. Do not rely on the first play that happens at page load, because this mark sits below the fold.

Set duration, loop, direction, and render

Select the Lottie element and open Element settings, then Lottie animation settings. Four controls decide how the file plays on its own:

• Built-in duration is how long the animation takes to play
• Loop sets whether it repeats without stopping
• Play in reverse runs the frames backward
• Render chooses SVG or canvas

By default, the animation plays as the page loads. A visitor who has to scroll to see it will miss that first play unless the animation loops, or unless an interaction starts it later. For the checkmark, leave loop off if it should draw once when the row appears, and use an interaction for the timing. Loop is the right switch for an icon that should keep moving in the header.

If you want the file's own timing, select the element, open Lottie animation settings, and check Use built-in duration. You can still override that timing from an interaction. Webflow's Lottie article says playback settings in the Interactions panel overwrite the settings in Lottie animation settings.

Play it on click, on scroll, or from a chosen frame

Interactions change when the file plays, which part plays, and where it stops. Webflow's Lottie article documents two interactions that exist only for Lottie: Lottie playback, and the Lottie action.

To play the checkmark when someone clicks it, select the element, open the Interactions panel, and click the plus next to Element trigger. Choose Mouse click (tap). Under On 1st click, select an action, then choose Lottie playback under Integrations. You can add a delay, reverse the play, or loop it from that same action.

To play it when the row enters the screen, use Element trigger again and choose Scroll into view. For When scrolled into view, choose Lottie playback. For When scrolled out of view, choose Lottie playback and check Reverse if the mark should run backward as it leaves. You can set an offset or a delay on those actions.

To play only part of the file when the page loads, use a page trigger. Click the plus next to Page trigger, choose Page load, and under When page starts loading choose Start an animation. Add a timed animation, then add a Lottie action under Integrations. Set the first frame, check Set as initial state, add a second Lottie action, and set the frame where it should stop. Webflow's example for playing through to the end is 100%. Save, then adjust duration, delay, or easing if the built-in timing is too fast.

Use one trigger for the checkmark. A page-load animation and a scroll animation on the same element will both try to own the frames.

Publish and watch the frame people actually see

Publish the page and scroll to the pricing row. The checkmark should start when that row enters the view, not while the hero is still on screen. If you also added a click trigger, the steps above set the first click only.

If the icon is blank, Replace Lottie sequence was never pointed at a file, or the file in Assets is not a Lottie JSON or dotLottie file. Upload the file again and select it on the element. If the animation plays in the Designer and not on the live page, publish after the interaction change. Interactions are part of the published site.

On a phone, scroll until the row is actually in view. An offset that was comfortable on desktop can start the animation before the icon is on a small screen, or after the visitor has already passed it. Shorten the offset, publish, and scroll the live page once more.