lottie with scrolltrigger

[Lovestoned]

here is the pen...

If I use lottie animation and pin it true .anotherdiv overlaping animation div...you can see .anotherdiv scrolltrigger markers...

 

what is the problem on this scrolling? About scrolltrigger or lottie?

 

thanks...

 

 

See the Pen ExmLwbd by ersenturgut (@ersenturgut) on CodePen

[OSUblake]

Check out the common mistakes page. A timeline shouldn't have nested scroll triggers.

 

[Lovestoned]

ok what do you say now?

 

 

 

 

[akapowl]

 

Hello there. It's best to create your ScrollTriggers in the order of appearance on your page.

 

You've got that first ScrollTrigger in your init() function which is being called on load of your Lottie, it looks to me - but that other ScrollTrigger is not in that load event - so chances are pretty high, that it will be created before the other ScrollTrigger - and then it can not take the pinSpacing of that other ScrollTrigger into account. This is what I think is the core issue.

 

If you do not want or can not create your ScrollTrigger in order of appearance, you might want to take a peek at the .sort() method and/or using refreshPriorities for your Scrolltriggers (which are being explained on that same documentation page).

 

 

 

Some sidenotes:

You've got the exact same scrollTrigger setup for your two first timelines there - there's no need to create two seperate scrollTriggers in that case. You could just add those tweens to the same timeline and set their position parameter to 0 if you wanted them to both start scrubbing right onEnter.

 

If the body is the scroller, pinType: "fixed" will be used by default, so there is no real need for setting that. The body will be used as the default scroller, too, so technically there is also no need for setting that. And one more thing: anticipatePin is supposed to be a number.

 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. [...]

 

 

I Hope that's helpful.

 

See the Pen b67f3eff0e52b0633b604893579da19e?editors=1010 by akapowl (@akapowl) on CodePen

[Lovestoned]

akapowl !

 

thanks for your reply...solved my problem...great!