Refresh does not work when resizing

[choconatsu]

Hello.

 

Sorry if it doesn't come across well, as I am writing this using a translation tool.

 

Some sections are displayed with horizontal scrolling

 

The onEnter is used to fix the last section and make it look like overlapping layers, but if the window size (width) is changed during the process, the scrolling amount is not calculated correctly and the window cannot be scrolled to the end.

 

This is especially true when the width is increased from a small width.

Do you have a good suggestion to solve this? Thanks!

 

 

 

See the Pen gOGQLvQ by nasunnn (@nasunnn) on CodePen

[akapowl]

 

Welcome to the GSAP forums @choconatsu

 

You'll need to add invalidateOnRefresh: true to your ScrollTrigger to make the tween work with the fresh values after a refresh.

 

Here's what the docs say:

 

Quote

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

   

 

When you set the invalidateOnRefresh, you'll notice things will behave different. You'll then also have to adjust your end of the ScrollTrigger and value for the x -tween. If you don't want the tween to end with the right side of the container flush to the right side of the window, don't substract the innerWidth/area.clientWidth from the wrap.offsetWidth/wrap.clientWidth in the calculation for the x in the tween as well as the end of the ScrollTrigger.

 

I would suggest not mixing multiple different values like that as it might throw things off at some point. I'm not sure if what you are doing with setting the .fixSection to fixed onEnter of the ScrollTrigger is the best idea either because technically you are changing the dimensions of the container that you are getting the width value for at this point which also might lead to confusing behaviour at some point - I would probably take it out of that container and just have it fixed to begin with - but I'm also not sure what the exact intent is with setting it to fixed onEnter. Lastly, I'd also get rid off the endTrigger you set there, as I'm not sure it really does help at all here.

 

I hope this will help a bit.

 

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

 

[choconatsu]

I just followed the demo you gave me and it worked!

 

I was having trouble using invalidateOnRefresh to get it to work as I imagined, but it didn't occur to me that the x and end values were affecting it.

 

Thank you!