ScrollTrigger Pinning Issue Fixes Itself Upon Browser / Codepen Panel Resize

[PonyBoy]

I'm working on a small proof of concent piece. As you can see in the HTML I have a series of simple divs stacked atop each other with a class '.flex-container'. The css basically sets each div's width and height to match the browser window and centers it's contents both vertically and horizontally. Each '.flex-container' div is also labeled with one of two other classes: '.text-holder' or '.box-holder'. The difference is one holds either a <div> (.box-holder) that is a simple box created via css and the other holds a <p> element (.text-holder) which will eventually hold text fed in via GSAP's TextPlugin.

 

The issue is when I run the script locally or via code pen that the pinning is off after the fourth '.flex-container' div. That div and the following div become separate and you'll see some white background appear for a moment until the next div scrolling kicks in. However, the animation in the following div is off... all the following divs after those initial four do not scroll / animate as expected... that is until you resize the browser / adjust the size of the codepen panel.

 

Once resized the scrolling and pinned animations work perfectly / as expected. I can't figure out what's not updating initially that updates when you resize the browser / panel (To adjust the size of the codepen panel either open the panel (Edit via Codepen) or click on one of the scaling buttons, ie 1x, .5x, .25x - you'll see the break between the 4th and 5th panels instantly fix itself).  

 

I'm running 2 simple forEach loops that assign the animations / ScrollTrigger variables to each 'text-holder' and 'box-holder' div... I don't seem to have any errors in the console.

 

Thank you for having a look!

See the Pen bGQdWXE by Kevin-Ross (@Kevin-Ross) on CodePen

[mvaneijgen]

Hi @PonyBoy, 

 

The order in which ScrollTriggers are called is important, because if something has a ScrollTrigger lots of properties are calculated. Seen that you have two loops the first loop gets all initialized and then your second loop is called, but then the original calculations are off, because new ScrollTriggers are created that live in between other ScrollTriggers. That is where refreshPriority comes in. From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

The example below has the same setup and uses a data-priority property on the HTML which gets set as the refreshPriority for each loop. Hope it helps and happy tweening! 

 

See the Pen YzOMKJW by mvaneijgen (@mvaneijgen) on CodePen

[PonyBoy]

mvaneijgen... that solved it... thank you so much!