Lottie - Scroll Animation Disappears

Design help Animations & Interactions
1

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

2

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!

3

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

4

Anyone figure out a fix for this?

5

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:

6

@Mike_Zachariades Could you please help me with the screenshot, since I want to have the Lottie animation only when the element is in view without any scroll interaction. I dn’t have an option to stop the animation at 99%. So would need the fix in AE.

7

@Papiya You have to overextend the element boxes beyond the playhead end / loop end. By default, the element boxes end exactly where the loop/playhead ends, whereas bodymovin seems to render an extra frame which is then blank since the boxes end short. By overextending the element boxes, you resolve the issue of rendering a blank frame at the end of your animation. See screenshot below:

After Effects Tutorial

8

Thanks Mike, will give it a try.

9

I realize this is an old thread, but it still shows up in google searches when searching for a solution to this issue. I’ve found in AE making it either 30fps or 60fps fixes this. If it’s 24fps or some other number that doesn’t divide evenly into 60 seconds then the animation seems to be glitchy/gets cut off.

1 Like