Scrolltrigger with multiple lottie animation

[krunal 0 Likes (Newbie)]

How i can Scrolltrigger with multiple lottie animation or i can manage lotties json layer using scrolltrigger.

 

https://www.loom.com/share/120d792b069a46b1b77fdd42a59161a6

See the Pen YzeRZOx?editors=1010 by vijaysolankiii (@vijaysolankiii) on CodePen

[Cassie 3,980 Likes (Superhero)]

Hey there! So I've looked at your loom and that isn't scroll behaviour you're explaining.

You're talking about stopping default scrolling and listening to mousewheel/touch events and then triggering an animation. You'll want to look into Observer instead of Lottie.

https://greensock.com/docs/v3/Plugins/Observer

 

That's the GSAP bit, the Lottie bit is something like - (you may have to double check their docs, I'm not 100% certain)

 

anim.playSegments([0,100],true);

 

 

⚠️ Also just a little note - I've seen a few people using Lottie for animations with text like this. Using GSAP to animate HTML elements is always going to be preferable because then the text is accessible for visually impaired people using screenreaders, it's also searchable, able to be copy pasted by the user and can be used for SEO. Lottie is a reasonable choice for animating graphics, but it's really not a great option for text.