How to use Lottie in Webflow

[TomPiggott]

Hi Guys,

Can’t workout how to or find any decent info on how to use lottie files with Webflow.

Does anyone know how to use them with Webflow or know of a good tutorial for embedding them?

Thanks a lot,

Tom

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[jonathanharing]

Hey Tom! I just posted this about using/setting up Lottie on my site. It’s not super thorough… hope to do a tutorial at some point… but might help in the meantime:

Lottie Animations in Webflow

Hi! I know some people on the livestream were curious about Lottie. I’m new to using it, but experimented with it on my portfolio a while ago and thought I would share what I did! Hope to do a more extensive tutorial and example page soon, but hope this helps in the meantime: There is a plugin for After Effects called Bodymovin that allows most object animations to be exported as JSON/javascript, as well as a script by Airbnb called Lottie for incorporating these animations into apps/web. Every…

[TomPiggott]

Thanks man, I have a lot of experience with Lottie. What I want to know is how to put it into my website. What method did you use?

[jonathanharing]

No problem! The Bodymovin plugin for After Effects exports everything you need (including Lottie) to use the animations on web. Not sure that’s what you’re looking for… I know Lottie can be used separately so maybe this method can be adapted?

Assuming you use Bodymovin, you need to select the “Demo” export option in the Bodymovin plugin within After Effects (you may need to click “get the player” in the top right hand corner first to download the Lottie code required). It will spit out an HTML and JSON file with everything you need.

From there I just deconstructed the HTML/JSON files to be more organized. I repackaged the JSON animation code as a Javascript file, putting all the animation code in a variable named “animationData” which is referenced in the HTML code. I also removed all of the script from the HTML file except the very last part starting with “var params = {”, saved as a separate file (it’s basically all just Lottie script) and included that. And then incorporated the small bit of remaining script from the HTML document into the before /body custom code area of Webflow so that I could easily change the parameters like looping, variable names, etc. Then use the ID “lottie” on a div, and you should be set!

In theory once you have the necessary code you can export the JSON animation files alone from After Effects and use the same include files and before /body code on any page to use the animations. Hope that helps!

[TomPiggott]

Exactly what I needed to know. Thank you so much

[byratusj]

Thank you SOOOO MUCH !!
This was really useful !