Pitfall with Lottie offsetting counting from page top

Posting this as a point of reference in case anyone happens to have the same issue.

Let’s say you have three lottie animations in a page. You want them to run in a staggered order so you use the interaction settings on a Lottie animation to delay using the Counting from page top option, setting different pixel offset values.

There is a pitfall here in that no matter the length of the animations or the amount of offset applied, ALL animations will be played as one and complete at the same time.

To give you an example, here is a demo with three identical lotties in a fixed position with different offsetting amounts applied: Project

There you can see the first lottie completes at the specified scroll depth, the second starts later but ‘races’ to catch up and completes at the same time. The third, which has a start position after the first completes, appears to never play.

You can get around this by using the Relative to page height setting but as the existing animation toolset favours delay from top, I imagine most will instinctively try to follow the same path. Of course, you’ll also want to set these values only once the page is set to it’s final length to avoid having to re-do.

Have raised with support who say this behaviour is as per their documentation.

1 Like

the alternative woud be to implement the lottiefiles in a custom-code widget by yourself, which gives you a lot more options! e.g. playing a segment (frame 0 to 500) of your lottie in loop and on a triggering event play another segment (frame 500 - 1000) in loop.