Animation chain with autoplay then loop and then linked to the scroll

1

I’m building the hero section for the homepage of a website, where I have a Lottie animation that is always visible on that section. What I want to do is automatically play the first few frames, then have it loop between certain frames, and finally, as the user scrolls, transition to the last frames with the animation linked to the scroll. Is this possible?

1 Like
3

Hello!
Having the same issue. Help is appreciated!

4

Hey! :waving_hand: Carmen from LottieFiles here
Just jumping in to help! Before I share a CodePen demo, could you let me know which player or integration you’re using to render the Lottie animation?

For example:

  • dotLottie Web Player
  • React
  • Lottie-web
  • Lottie for iOS / Android / React Native

Or something else?
That’ll help me make sure the solution works for your setup.

Thanks!

5

Hey @Julian1 ! This demo does exactly what you’re looking for: https://codepen.io/lottiefiles/pen/oggBBwV — autoplay → loop → scroll control.
Just FYI, in the next release we’re adding a new resetSegment() method, so this kind of control will be even cleaner soon!

6

Hi @Carmen !
Sorry for the late reply — I didn’t see your first message at first.
I was using lottie-web along with lottie-interactivity, and I managed to resolve the issue by combining both libraries.

I’ll definitely keep your approach in mind for future cases!
The only thing missing in your example — in my case — was that I needed the animation to keep looping between certain frames when scrolling back to the top.