Window resize messes with ScrollTrigger horizontal x axis

[Innat]

Hello, I'm beginning with ScrollTrigger and I'm trying to create a fake horizontall scroll and I'm having trouble to handle window resize. Even though the scrollContainer width seems to be recalculated, it doesn't fit its right size and I don't get why. I've thought that put end value in a callback function and set invalidateOnRefresh to true should do the trick but it doesn't.

 

Thanks for your help and for this amazing product that is greensock !

See the Pen vYdxYbV?editors=0111 by heskir-the-bold (@heskir-the-bold) on CodePen

[GreenSock]

Welcome to the forums, @Innat. 

 

The problems I noticed: 

1. You need to make your "x" value function-based so that it can get dynamically refreshed after resize. Right now, it's feeding in a normal number at the beginning. So let's say -containerWidth - window.innerWidth evaluates to 1000 initially...but then you resize the window 500px larger. See the problem? It's still going to be animating x to -1000. You need a way to repopulate those (by making it a function). 
2. You calculate the containerWidth initially and never again, even though it would dynamically change when the viewport resizes. So again, you shouldn't be using that variable. You need to dynamically calculate those values. 

I assume this is more like what you wanted? 

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

 

I hope that helps. Happy tweening!

[Innat]

Thank you a lot for this explanation ! It's seems so obvious right now ...