scrolltrigger ScrollTrigger: update horizontal scroll pin on window resize

[Mister Pixel]

Hi GSAP community,

 

Can anyone help me with the following issue?

 

I'm using ScrollTrigger to horizontally scroll/pin a few slides.

The number of pixels to scroll (x) is a dynamic value: the overflow of the row with slides compared to it's parent.

This works perfectly on the initial load of the page.

But if you resize the viewport to a point where the parent narrows the pin end point gets off.

 

I made a minimal demo to reproduce the issue.

Resize the window to a point where the parent/container (blue border) narrows.

You'll see that the last slide (the end of the scrub) won't line up with the parent container (blue border) anymore.

 

I assume my function to calculate the overflow is wrong.

 

Any help is greatly appreciated!

See the Pen wvZLqLG by misterpixel (@misterpixel) on CodePen.

[akapowl]

1 hour ago, Mister Pixel said:

I assume my function to calculate the overflow is wrong.

Works fine for me - looks like you just made one of the most common ScrollTrigger mistakes here. You'll need to feed your function to get the value for the x translation as a function-based value, so ScrollTrigger can get it from scratch when invalidating on refresh.

 

gsap.to( '.slides-row', {
  x: scroll(), // change this...
  ease: 'none',
  // ...

gsap.to( '.slides-row', {
  x: () => scroll(), // ... to this
  ease: 'none',
  // ...

 

https://gsap.com/resources/st-mistakes/#forgetting-to-use-function-based-startend-values-for-things-that-are-dependent-on-viewport-sizing

See the Pen YzMoYLd by akapowl (@akapowl) on CodePen.

[Mister Pixel]

Thank you @akapowl, that indeed fixed it!

I can't believe it was something so small!