Streaming live at 10am (PST)

Adding Lottie Animation to part of a CSS Project Template without sharing across that template

Hey there. After most of the 21 day challenge Webflow course I have come to a big fat brick in the road. I would like to now add (Instead of just the project image from my CSS Projects Template) a different lottie animation to each individualof the CSS Project templates. I’m sure there is a workaround and unfortunately I am sure there is no direct category for lottie in the CSS portion of Webflow. If someone can hip me to a workflow that would be huge!

Will I need to turn each page in my CSS template into its own seperate (non CSS) page?

Thank you in advance!
Peace, stay healthy!


Here is my public share link: LINK
(how to access public share link)

Hey Burton!

Take a look at this post on the forum:

Looks like there is a fairly simple way to this using the embed element. Disclaimer: I haven’t tried this myself, but the logic behind it seems to work.

Let me know if you have any further issues! :slight_smile:

I figured out another way which thus far seems to be working. I created another section/div block and then dropped the Lottie file in the dive block. Then in (section) settings I put visibility constraints on Project Name is Equal too = what every project I want to match that lottie animation too. Then I just setup the animation preferences… walla. I will report back once the site is launched and functioning as I think it should.

This was another option I was thinking of, though I think the one that I linked above would be much easier.

Nevertheless, I am glad you found a solution! :slight_smile:

Well here is the version where I followed my constrain image idea. It seems like in the end it was about the same amount of work.
On the projects page where the Lottie animations reside, I am wondering if I can implement a scroll bar for the Lottie animations vs the desktop version I implemented that allows mouse movement to scroll the image from start to finish (not allowed on mobile or touch)? Other than cleaning up a few design flaws I’m pretty close to done!