Updating values on window resize

[David1985]

Hi everyone,

 

I came across a horizontal scroll solution made by GSAP's Cassie that features a pausing effect on each horizontal scroll item. On initial page load this works perfectly! However when the window is resized, the effect is broken. If you look at the Codepen, there are two values that need be updated. container.offsetWidth, and the variable increment. From my understanding having 'invalidateOnRefresh: true' should update the container value, but it doesn't seem to be. The increment variable uses the container value as well so it is also not updating.

 

Is anyone able to take a look and see what it would take to make it responsive? Hopefully it is a relatively easy fix.

 

Thank you

See the Pen NWeBwBL by dfranz1 (@dfranz1) on CodePen

[GreenSock]

Are you trying to do this?:

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

 

The problem was that the "increment" was only getting calculated when the page first loaded. You just need to make it dynamic. 

[David1985]

Thanks Jack! My mediocre javascript skills didn't pick up on that. The increment value is now correctly renewing on window resize.

[GreenSock]

No problem. Happy to help. 🙌

 

Good luck with your project.