ScrollTrigger init beneath markers with opacity

[Maglr.com]

I’m seeing strange behavior in ScrollTrigger when I initialize the scroll triggers below the markers.

 

I’ve created this simple demo to reproduce the issue I’m seeing in my larger project.
Please click the "Scroll to Info" button first, then after scrolling, click the "Init" button to set up the scroll triggers. After initialization, slowly scroll up until you see the green box like in the image below. Notice that it is not at the correct position and when passing the orange marker it jumps to the end position and then plays in the correct way like it does when the initialization is done at the top of the page.

 

Can anyone please explain why I am seeing this behavior and how to work around this.

See the Pen myVMxEL by jaap-maglr-com (@jaap-maglr-com) on CodePen.

[GreenSock]

It looks like you're creating the ScrollTriggers out-of-order (you should always create them in the order they'd appear/trigger on the page, otherwise make sure you set a refreshPriority). So your from() timeline is getting rendered LAST which sets x/y to 0. 

 

Solution: 

1. Set refreshPriority on your ScrollTriggers (or create them in the proper order)
2. Call ScrollTrigger.refresh() when you're done creating things to force ScrollTrigger to re-render from the top down. 

See the Pen qEbXzar?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

Does that behave the way you wanted? 

[Maglr.com]

Hi Greensock, thanks for pointing that out. It seems to do the trick.