Lottie files in CMS items

Publishing help API
22

You’re my SuperHero😍 Thank you Julian! Now I play this on pageload, however I didn’t have time to write codes for interactions (like scrolling) Is there any easier way to animate the embedded code on user interaction? Or only JS with different functions?

23

hey, @ericlchen I was wondering if you could provide a clone example of the LottieInteractivity working to make Lottie animate on scroll? so far i’ve gotten it to work, but there’s no easing with the animation and it goes from frame 1 to the end frame instantly. Would appreciate your help :slight_smile:

1 Like
24

Hey, a bit complicated for me to create a clone project since this animation lives in a CMS template page. But here is my custom code from that page:

(In custom code area before tag)

<!-- Lottie Interactivity Script -->
<script>
LottieInteractivity.create({
  player: '#lottie-animation',
	mode: 'scroll',
  container: '.body',
  actions: [
    {
      visibility: [0, 1],
      type: 'seek',
      frames: [0, {{wf {&quot;path&quot;:&quot;last-frame&quot;,&quot;type&quot;:&quot;Number&quot;\} }}],
    },
  ],
});
</script>

and
(In an HTML embed in page):

<lottie-player id="lottie-animation" class="lottie-animation" src="{{wf {&quot;path&quot;:&quot;link-to-lottie-file&quot;,&quot;type&quot;:&quot;Link&quot;\} }}"  background="transparent" renderer="canvas"></lottie-player>

I added a CMS field to input “last frame” as well as a link to the lottie file. I’m not sure how helpful it is but hope you can use this in some way!

25

Thank you both for sharing @Julian_Wan @ericlchen !

I was wondering if you know how to make the CMS/Ecomm product Lottie file work on scroll?

You can see that I have successfully connected the Webflow Ecomm product page to AWS CloudFront, but I could only figure out how to make it play videos that auto play instead of a Lottie playing on scroll.

https://preview.webflow.com/preview/seganca-wf?utm_medium=preview_link&utm_source=designer&utm_content=seganca-wf&preview=e603e3103cd0474aee7299bbb68d845f&pageId=6187252223a7e003597263e5&itemId=6188b32fccf1bc579b4033c0&workflow=preview

27

Life saver. It works perfectly! Only thing to add, if you don’t have a Lottie animation on all of your CMS items, you can add a Conditional Visibility on the embed element by looking at if the Bodymovin CMS element is set.
Screen Shot 2022-03-09 at 9.41.38 AM

28

Hello!

I had the same issue. I created a CMS page with three different projects and wanted to have different Lottie files in every one of them. I wanted to make the animations interactive while scrolling the page and didn’t manage to do that with this solution.

To solve this, I added all of the Lottie files in the div block where I wanted them and added a filter depending on what project I wanted the animation to display. I think this might be a more straightforward solution and easily achievable to the ones not knowing code (yet, like me).

I hope that it can help someone!
V.

29

Hello, thanks for this post. I only would like to know if you could maintain the Lottie animations shown in the Webflow CMS in your private animations in the Lottie web page? Or you must have published them to make it visible in Webflow?.

Best Regards,
LM

30

Hello, could you share the code you used?

thanks,
LM

32

Hello!

The thing is that I didn’t use code. That was what I was saying. I only added Webflow’s integrated feature that lets you display one thing or another depending on your set factors! :slight_smile: