Lovestoned Posted July 30, 2021 Share Posted July 30, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted July 30, 2021 Share Posted July 30, 2021 Check out the common mistakes page. A timeline shouldn't have nested scroll triggers. 3 Link to comment Share on other sites More sharing options...
Lovestoned Posted August 3, 2021 Author Share Posted August 3, 2021 ok what do you say now? Link to comment Share on other sites More sharing options...
Solution akapowl Posted August 3, 2021 Solution Share Posted August 3, 2021 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 3 Link to comment Share on other sites More sharing options...
Lovestoned Posted August 3, 2021 Author Share Posted August 3, 2021 akapowl ! thanks for your reply...solved my problem...great! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now