Share Posted June 7 I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks! See the Pen YzeOEyX by marctaule (@marctaule) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 7 You should always create your ScrollTriggers in the order they appear on the page, particularly when pinning because things further up on the page could affect things lower. In your demo, you're creating ALL the image ScrollTriggers first even though some of them are BELOW the ".slider" ones. So when refreshing, by default it would calculate all the start/end positions in that order but the images below the ".slider" would actually get pushed further down due to the pinning of that slider. See the issue? There are several solutions. If you're creating things out-of-order, you can define a refreshPriority for each to control the order things get refreshed. Or in your particular case, you could simply add a ScrollTrigger.sort() call at the end of your code which uses the "start" values to order things. Your setup allows for that to work. See the Pen ExQeLxV by GreenSock (@GreenSock) on CodePen Does that clear things up? 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