I’m loving the new Lottie integration, and was wondering if there was a way to use it with the CMS.
I’d love to have a dynamic Lottie element in my CMS template page filled by a Lottie JSON file I upload to each individual CMS entry.
Has anyone managed to do this, or is it not yet possible?
I stopped trying to make this work with Embed and json code because of the size of my jsons. My plan was to try to emulate the component and use a dummy lottie component with a certain class that’d match the class declared in custom code…
Well, we all want what you want and I think we’re all entitled to because it makes sense, right? So I hope this happens some day soon 
Go check if the idea is on the whishlist already maybe and if it’s not, add it.
Thanks Vincent, just added it in. Here’s the link if anyone else comes across this thread and wants to help make it happen 
Lottie files in CMS entries | Webflow Wishlist
Hmm your solution actually sounds pretty good, if I can keep the size of the JSONs down. If you ever end up writing out what you were doing I’d love to check it out (sadly can’t code so I can’t piece it together from what you wrote there 
)
I found out how to do this very easily.
Step 1: Upload a Lottie JSON to your Webflow project:
Step 2: Copy the URL to the file, and add a URL field to your CMS collection:
Step 3: Visit the Lottie web player page, add your JSON url to the form:
Step 4: Customize and tweak your embed settings to your liking:
Step 5: Add a custom embed, and replace the URL with a dynamic link referencing your CMS JSON URL:
Step 6: There is no step 6. You’re done. Congratulations.
This looks PERFECT @Julian_Wan I’ll be trying this out in the next week or so, thanks for taking the time to write it all up 
@Julian_Wan Can you provide the full code snippet using “Preformatted text”?
Sure, I linked to the site which has it (Lottie Web Player - Lottiefiles) but here it is:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>
<lottie-player src="<YOUR LOTTIE URL HERE>"
background="transparent"
speed="1"style="width: 300px; height: 300px;"
loop controls autoplay></lottie-player>
Hey @Julian_Wan thanks for doing this! Do you know if is there a way to use Webflow interactions with these Lottie files?
Hey @ericlchen — I suppose if you gave a class to the actual container, then used “class” based (rather than element based) Webflow animations, it would be possible.
I haven’t tested it, but this may work!
Hey @Julian_Wan thanks so much for the suggestion. I tried to do what you said and added a class to the in the embed and tried to reference it within Interactions, but it’s not animating on the live site. Am I adding the class to the correct element? When I click the keyframe in the interaction it references the Lottie element I have hidden currently, because I couldn’t use a Lottie interaction unless I clicked on a Lottie element. Thanks!
I didn’t really know where to start with what you shared, but I created this for you:
Hopefully it helps.
@Julian_Wan Thanks so much for all this help Julian. After seeing your implementation and using some extra code, I was able to get it working.
I used an additional script (LottieInteractivity) and code from this page to create the scrolling animation.
Going to take my previous links down for privacy purposes.
I figured out a way to do this while trying to figure out a way to implement embed elements in cms pages. In short, I’m building a site for a tattoo parlour. My only cms collection is the artists that work at the parlour. Each artist page should pull content from their respective instagram page. I used elfsight’s plugin because it can filter posts by hashtag, as to not pull personal photos like selfies or unrelated tattoo content.
Back to business.
On the artist template page, I placed a separate embed element for each artist. Four artists - four embed elements.
Going back in to the cms collection settings, I also added a toggle for each artists, and gave each toggle the name of the tattoo artist. Now going into each artist’s settings, I turn on their respective toggle. ie; On simon’s settings, I turn on the simon toggle. On Sylvain’s settings, I turn on the Sylvain toggle. Do this for each cms item.
Go back into the cms page template and add a filter on each embed element (visible only when simon toggle is on) (visible only when sylvain is toggle is on) etc.
Now when you preview your site, only the embed for simon will show on his page.
This should also work for json files.
Hi @trnplmr,
Thanks for mentioning us here. We’re happy you find us useful for your project. You can always count on our team if there are any questions. 
Regards,
Elfsight Team
Hey all!
I’ve managed to get the lottie player working using the CMS to load custom URL’s - On a page i’m loading 50+ lotties using the CMS.
However, even though it works, I’m getting spammed with errors in the console, which makes the page load really really slowly 
Would anyone be able to help out with this?
Code used to load lottie player -
Error in console that slows down the page load speed by 7 seconds -
any help would be greatly appreciated!!
@andydaoo => You’re loading <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> for each instance of an item in your collection. Don’t.
awesome this works! Thank you
Really cool to see your response. Thanks @ericlchen for the mention!
To piggyback on what @webdev said, you only need to load a script once.
Think of it like introducing yourself at a party. Once you’ve been introduced, the system will keep track of who you are and what you defined about yourself. (And keep track of what the script is defining and describing).
But doing that again, for everyone else you meet, will definitely crash your system.
Hey!
Maybe you can help me with an animation. I have a problem with the renderer. When I use SVG the file flickers in Safari and Chrome and in Canvas it looks all weird. View image.
