Lottie animation dissapears with trigger scroll into view

I have brought in my Lottie animation into Webflow and when I simply place it somewhere on my site it works fine. The problem is, when I apply a “Scroll into view” trigger to the Lottie file, it disappears after playback. I really hope someone can shed some light on this… please help if possible.


Here is my public share link: https://preview.webflow.com/preview/invoca-com?utm_medium=preview_link&utm_source=designer&utm_content=invoca-com&preview=cb459e9f941bff2decaa2dbdacf81562&mode=preview
(how to access public share link)

Hey Matt! Were you able to solve this? I’m having a similar problem.

Hi! No not yet. I came up with a “hack” workaround if you are interested. Basically, I took a snapshot of the animation - which you can do in BodyMovin within After Effects. This produces a SVG. Then in my Webflow interactions, I added the snapshot SVG to the Lottie container and set it to display none untill right about the time the Lottie animation is about to complete. Then I set that SVG to display block so as the Lottie animation disappears, the static SVG (in it’s final state) appears and looks seamless. Hope this makes sense.

If I don’t get a reply back from someone in the community, I’m going to @ mention one of theme directly to see if I can get some assistance.

Thanks Matt! I’ll try that out. would you mind sharing in here if you get a solution?

@megobair I absolutely will

Any update? Is this a webflow bug, or a after effects/lottie thing? Thanks

@Matt_Brodersen Hello. Had a similar issue, I think yours could have the same solution.
I think the issue has to do with bodymovin reading the animation’s last frame +1 extra empty frame. So set your lottie to be finished at at 99.9%, instead of 100%.

I believe this to be a bodymovin issue/bug.

2 Likes

I also had success doing the same thing.

@Tombo @Mr_Finn

How’s that done? Editing the JSON ? Changing the duration setting in Webflow? Can’t get it happening.

Oh, here’s how, for anyone else struggling with it:

Need to create a “Scroll into view” interaction and then select “Start an animation” rather than using the standard “Lottie playback” integration. That gives you more control as shown in the GIF, allowing you to select 99.9% as the end time.

Thanks for the lead @Tombo @Mr_Finn ! :slight_smile:

6 Likes

I was having a similar issue as others have stated earlier in this thread. Setting the Lottie to 99.99% instead of 100% worked for me, thank you!

I know this is several years later, but thanks so much for that solution! Taken my project from not being production ready to being production ready