Pls help: Recalculating horizontal scroll width on resize not working

[blueblueblueblue]

Hello everyone!

I have a horizontal scroll section on my site as seen in the codepen. The problem is, when resizing the window horizontally, the width doesnt match anymore and the hotizontal scroll either goes too far or some of my content is cut off.

I cant use xPercent instead of x since i need different widths for various screen widths.

I already tried a solution suggested in another Thread (

), but it doesnt seem to work in my case.
Any ideas why or different approaches? Thanks a lot for your help!

See the Pen XWyqOjR by blueblueblueblue (@blueblueblueblue) on CodePen

[akapowl]

Welcome to the GreenSock forum @blueblueblueblue

For ScrollTrigger to get new values after invalidating the old you will need to use function based values for what you're tweening on, or else the invalidation on refresh won't do much for you in the first place.
 

x: () => -1 * width,

// instead of

x: -1 * width,

 

Secondly, you could try changing the ScrollTrigger event that you overwrite your width variable on, from "refreshInit" to "revert".

That does seem to work better for me then.

 

See the Pen JjevVGG by akapowl (@akapowl) on CodePen

 

 

 

Personally, I don't actually see the need for an extra function to call on resize when you have only a few values that need re-evalution anyway, so I would actually ommit that function altogether in your case and just get the values on the tween itself directly; then you also wouldn't have to worry about any events anymore.

I would also suggest moving away from getBoundingClientRect().width for this, because you technically only add one extra step for the browser to get to the value you need (and getBoundinClientRect() values might not always return what you think they do in other scenarios); when you can instead use something like element.scrollWidth instead.

 

I hope that will help get you on the right track.

 

See the Pen vYQjMyZ by akapowl (@akapowl) on CodePen

 

[blueblueblueblue]

Thank you so much for the help and all of the detailed explanation @akapowl!
I'm pretty much new to gsap and javascript in general, thatswhy i was just copying some stuff i saw on different forums.
Either way everything works perfectly now and i think i even understood most of your explaining