Embedding Lottie Animations in WF

At a glance

The post asks if anyone is good at embedding Lottie animations in Webflow (WF). The comments suggest that it is possible to embed Lottie animations in Webflow, and provide some guidance on the process. Community members mention that you need to upload the Lottie file (usually a .json file) to the Webflow image panel, and then place an image element and upload the Lottie file to it. They also note that you can set the Lottie animation to loop or play once, and use Webflow interactions to animate the Lottie on scroll. One community member provides a YouTube video tutorial on creating and embedding Lottie animations in Webflow.

Useful resources

BBlair

Anyone good at embedding Lottie animations in WF?

6 comments

RRajan

Yes!

BBlair

Rajan!

So I get that you can embed Lottie code.
Is that all there is to it?
Or does the Lottie file need to be hosted somewhere. Sort of like a YouTube vid is embedded but it is hosted on YT.

BBlair

An animator is creating a short vid in AE that I was going to embed and loop in Wf.
Wondered if Lottie is better option.

RRajan

It's pretty easy, you'll need to upload the lottie file (mostly '.json' in webflow's image panel)

Next step will be to just place the image element and upload the lottie over there

BBlair

K thanks will give it a go, just have to create a Lottie file or download one to test.

Can I set it to play automatically and loop? Like background video?

RRajan

https://youtu.be/trPOzqkvNfw?si=IKhwcAxmyZrHCCmi

Check this out, you can create lottie in after effects or lottie creator app

You can loop it or play once. You can also use webflow Interaction to move, animate lottie on scroll.

Add a reply

Community forum for knowledge and support

Embedding Lottie Animations in WF