3 Loop Segments triggered by scroll position

I’m a huge fan of the Lottie-Interactivity library. However there’s one thing it can’t seem to achieve.

Let’s say I have a lottie animation with three looping segments. I want each section to loop within a certain screen area. E.g. visibility: [0, 0.4] then [0.4, 0.8] and finally [0.8, 1]. This works perfectly fine except as the user scrolls the loop is (of course) cut off abruptly and the next loop starts.

Is there a way to let the first loop end and then start the next loop?

I know there’s “transition: ‘onComplete’” but this only works for manually triggered animations not scroll/visbility triggered.

Any ideas?

Hi @philipp.carlucci !

This isn’t currently possible with the lottie-interactivity library, but I can add it to the roadmap and look in to it.

Could you possibly share with me your interactivity code and the animation you’re using if possible?

If its private feel free to email it to me at:

sam@lottiefiles.com

Cheers!

Hy there i can see your post and i must say

  1. Detect Scroll Position: To implement actions based on scroll position, you need to first detect the user’s scroll position. This can be done using JavaScript. You can listen for the scroll event on the document or a specific element, and then retrieve the current scroll position using properties like window.scrollY or element.scrollTop.https://www.myaarpmedicare.dev/
  2. Define Loop Segments: Once you have the scroll position information, you can define different scroll segments or intervals where you want certain actions to occur. These segments might represent different sections of your webpage or application.

Thanks and regards
Charles Baily