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!