daveodden Posted April 21, 2021 Share Posted April 21, 2021 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 More sharing options...
akapowl Posted April 21, 2021 Share Posted April 21, 2021 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. 1 Link to comment Share on other sites More sharing options...
daveodden Posted April 21, 2021 Author Share Posted April 21, 2021 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! 2 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