ScrollTrigger parallax header recalculating incorrectly on window resize

[ekfuhrmann]

I came across what I presume to be a bug, but also could be a lapse in the way in which I'm using scrollTrigger to handle my header. Responsively the header works well across different displays on a fresh page load. That said, I run into issues when resizing the the window without reloading.

 

An example of what I'm talking about can be seen by resizing the vertical window size (viewport height). It seems like scrollTrigger isn't recalculating the depth which handles the scroll speed of that parallax layer resulting in the following:

 

I've included invalidateOnRefresh hoping that would resolve the issue, but to no avail.
 

See the Pen poePOzd by ekfuhrmann (@ekfuhrmann) on CodePen

[GreenSock]

Nah, it's not a bug - it's just that you're only looping through your elements once when the page loads and doing all your movement calculations based on that sizing. Use a function-based value and do the calculations inside that so whenever the ScrollTrigger refreshes and invalidates that timeline, it calls that function again and processes the new values accordingly:

See the Pen BaWRqLV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[ekfuhrmann]

Ah such a simple fix. That makes sense and is so obvious now looking back at it.

 

Thank you!

[GreenSock]

No worries! Glad it's not a bug and that it's all figured out now. 

 

Enjoy!