ScrollTriggers in Wrong Place on Window Resize

[ex-jedi]

When the window is resized the ScrollTriggers are in the wrong place. The CodePen example catches this when you resize down. But on the live site, Business Bookkeeping and Accountancy - Blossom Books, it happens when you both resize down and up. Also I have a side issue where the element markers don't show on resize. I need to refresh for them to reappear.

 

I've kinda fixed it I think by re-running the fadeInRotateParagraphs() function on resize but that's a bit janky (I haven't pushed that to the live site just yet). I'm pretty sure it's me not you. What am I doing wrong?

 

Thanks

See the Pen dypzBqZ?editors=0000 by ex-jedi (@ex-jedi) on CodePen

[ZachSaucier]

Hey ex-jedi. This issue is because ScrollTrigger tries to use the transformed position of elements when determining the ScrollTrigger's trigger position. Since you have rotateX(90deg) in your CSS, the elements are treated like they are 0px tall (because that's what they're rendered at).

 

I recommend not toggling CSS classes and using transitions but instead using GSAP for all of your animations. 

 

Some additional notes:

• Additionally, this is probably a good use case for using .batch().
• See this post for how to run a ScrollTrigger when an element is on screen but only reset it if it's off screen.
• You probably don't even need the matchMedia, I bet you can do it with a couple of regular ScrollTriggers per element.
• invalidateOnRefresh isn't doing anything for you in this circumstance so you can remove it.

[ex-jedi]

I'll do all the things. Many thanks.