How to set play-on-show on lottie file

Hello, i have problem bcs my lottie animation play when i load a website but it is on second section and reveal after scroll there but is already played before and just show like normal element.

I try to use <lottie-interactive path="lotie-animation.json" interaction="play-on-show"></lottie-interactive>

but that doesnt see my file anyway.

How to set that to play animation after show animation?


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

Have you tried using a scroll trigger to trigger your Lottie?
I haven’t tried that in awhile, but it should be an issue, same as triggering on click, hover, etc.

1 Like

I cant choose this file to trigger it

It’s pretty easy. You can put the scroll into view trigger on the lottie itself, and target the playback of the lottie as well. Here’s a readonly I just tested it on.

https://preview.webflow.com/preview/x-lottie-637f30?utm_medium=preview_link&utm_source=designer&utm_content=x-lottie-637f30&preview=c726c2230c0203d5bf44a982e3ad4083&workflow=preview

Yes, this should work, but problem is that, the logo animation is in navbar which is all the time there but hidded, after scroll he is animated to “show” and showing but animation is done, finished.

navigation> logo hidden> lotifile
https://preview.webflow.com/preview/investal?utm_medium=preview_link&utm_source=designer&utm_content=investal&preview=9a44f77fb915fec477420147185ebacc&locale=pl&workflow=preview