Streaming live at 10am (PST)

Lottie - Scroll Animation Disappears

Hey Everyone

Here’s the issue, been trying to get animated stuff from AE using bodymovin into webflow, and i want an animation to start when it scrolls into view and go away once it goes out of the screen. Simple stuff, but unfortunately the animation plays, goes until the end and then becomes blank(what i can see is that it snaps back to frame 1, when instead it should snap to the last frame). This is not the behaviour thats on the tutorial so i’m wondering if im doing something wrong in AE or is it some setting i’ve messed up in the webflow editor

Any help appreciated

I have a similar issue issue with my lottie animation, except that my animation disappears (animation sequence is finished) and I’m using mouse hover as the trigger.

Please help! Thanks!

Have you guys figured out a solution? Been stuck on this as well.

Anyone figure out a fix for this?

There seems to be a small issue within AE and Bodymovin. What seems to happen is that any animations rendered will be short by 1 millisecond e.g. if the composition length is 4:00 then the animation will end at 3:59. This is why the last frame of the animation is blank when imported to Webflow and seems to disappear.

There are two workarounds to this:

  1. In AE: drag any elements and key frames to extend by one millisecond after the loop’s end position so that when rendered, the animation will not end one frame/millisecond too early. (I can share a screenshot if required)

  2. Alternatively, in Webflow: set the animation’s duration to one millisecond shorter than the original duration.

Any of the above should do the trick.

Hope that helps :smile: