Jump to content

Marc T.

Pin elements with ScrollTrigger

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Solution

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?

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.