Jump to content
Search Community

ScrollTrigger - Wrong Start Position with Multiple Pinned Elements

daveodden test
Moderator Tag

Recommended Posts

Hey GSAP Folks,

 

First I'd like to say great products and great support! Ya'll really have some patience in this forum. 

 

I'm having a problem I cannot seem to figure out... A pinned component after a complex ScrollTrigger component has the wrong start position and ends up breaking the experience. This only happens when refreshing (or starting) the page on a mobile sized width and expanding the browser to a desktop size. I've also noticed intermittent issues when reloading the page on mobile, the start position is off on my second pinned component out the gate. Using the age-old technique of commenting out code to figure out what's causing it, I believe the ScrollTrigger instance labelled "left side copy block scrubbing (paused scrolling)" in my demo is what's causing it, but do not understand why, or how to fix it. I've read around here a lot and cannot seem to locate a solution. Any assistance is much appreciated!!

 

Notes:

- The CodePen is a paired down portion of the page I've created that focuses on the components in question and has all proprietary data, names, styles, etc removed - thus it looks the way it does..

- The app I've created is in React, so each section on the page is its own component with segregated code - each section's scrollTrigger instances are in their own component's files.

- the client I am building this for has a Club Greensock membership.

 

See the Pen wvgQrrV?editors=1100 by DaveOdden (@DaveOdden) on CodePen

Link to comment
Share on other sites

 

Hey @daveodden - welcome to the forums.

 

Those are close to 1000 lines of code to deal with. Usually debugging a whole live website is way out of scope for the forums, so please try to keep your demos minimal for the future.

 

But since you already hinted to what might be the problem here, here's what seems to fix your issue for me:

 

It looks like by creating your ScrollTriggers in that .forEach-loop you might be creating them out of order of appearance on the page.

I added a refreshPriority: 1 to that pinning ScrollTrigger you mentioned and it now seems to work after resize.

Give it a try and let us know if that makes things better for you.

 

See the Pen 46bfed47d3fa3e58a77ba25ade14c389 by akapowl (@akapowl) on CodePen

 

 

Here's a link to the section of the docs that contains an explanation of refreshPriority

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Hope that helps.

  • Like 1
Link to comment
Share on other sites

wooooo, boy, that seems to do the trick! I was hoping it'd be something that simple - and for some reason it didn't dawn on me to use that property! 

 

Thanks @akapowl. I appreciate your quick response as well. I tried to minimize the demo, but, it's a biggin'. Thanks again!

  • Like 2
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.
×
×
  • Create New...