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)
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:
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?
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!
Exactly what I needed to know. Thank you so much 
Thank you SOOOO MUCH !!
This was really useful !