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.
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.
@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%.
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.