Lottie Animation On Scroll

[codeSanjay]

I want the animation to be one by one from left to right on scroll and right to left on reverse scroll. I tried doing many things but still stucked. If you guys have any idea how to do. I would be very thankful to you guys. 

Thanks in advance.

See the Pen NWXozGb?editors=1111 by codeSanjay (@codeSanjay) on CodePen

[akapowl]

Welcome to the forums @codeSanjay

 

I'm not sure what exactly it is you are after, because you have scrub as well as toggleActions in your code there, and those two do not work alongside each other. They are different methods for how to control a tween via a ScrollTrigger - if you had both set, the scrub would always take over control.

 

Now if what you want is the scrubbing through the Lotties, you might want to consider having a look at the LottieScrollTrigger helper function in the docs

 

https://greensock.com/docs/v3/HelperFunctions#lottie

 

 

 

You can adjust the start of every other ScrollTrigger to be equivalent to the end of the one before like so...

 

start: self => self.previous().end

 

...and have it look something like this in the end.

 

Your Lottie-animations do appear to be actually finished halfway through their total time though. Maybe that is something you'll want to adjust.

 

I hope that helps. Oh, and I also updated your GSAP and ST versions to the latest, because in your demo you are using  relatively old and differing versions, which you should avoid if you can.

 

See the Pen VwyggZR by akapowl (@akapowl) on CodePen

 

 

 

Edit:

Here is an alternative that seems to work better with resizes - this one is not pinning the wrapper in a seperate ScrollTrigger upfront, but with every individual LottieScrollTrigger instead (and has a min-height set for the wrapper instead of a height in CSS).

 

See the Pen WNdPPME by akapowl (@akapowl) on CodePen

 

[codeSanjay]

Thankyou @akapowl so much. Loved it.