Resize issue using ScrollTrigger/matchMedia

[GarrettSiegel]

Hi there!

In my project (see the attached CodePen), I've designed a progress bar that moves through multiple sections. As you scroll in and out of each section, the progress bar adjusts to a specific percentage. This works as expected unless you resize the screen after scrolling down. If you scroll back up to the top after resizing, the progress bar does not reset to zero as it should. Instead, it displays some other percentage.

I've tried adding the "invalidateOnRefresh: true" option to my ScrollTrigger, but it hasn't resolved the issue. I've also attached a screenshot to better illustrate the problem I'm encountering.

Any help or guidance on this would be greatly appreciated.

Thank you!

 

See the Pen XWodpqo by garrettsiegel (@garrettsiegel) on CodePen

[mvaneijgen]

Hi @GarrettSiegel welcome to the forum!

 

I find this hard to debug, because I don't know what is wrong or right, what I do know is that normal users don't resize their browser in the middle of scrolling of a page, that is only something developers do. 

 

What you could do is use function based values, these should refresh on page resize. Hope it helps and happy tweening! 

 

See the Pen bGOpYrq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Side note: You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

[GarrettSiegel]

Hi there,

Thank you for the initial suggestions on my problem regarding the progress bar not resetting to zero upon screen resizing. I've since taken your advice into account:

1. I've removed the CSS transitions from my .fill element and let GSAP handle the transition to further ensure no conflict between the CSS and JS animations.

2. I've also implemented function-based values for the ScrollTrigger's start and end properties so that these values get re-calculated dynamically during a window resize.

Despite these adjustments, I'm still encountering the original issue: after resizing the screen and scrolling back to the top, the progress bar does not reset to zero as expected. Instead, it displays some other percentage.

I've updated my CodePen to reflect these changes -

Any further guidance would be greatly appreciated. Resolving this would go a long way in making the application more robust and user-friendly, especially for users who switch between different screen orientations.

Thanks!

[mvaneijgen]

Still not sure what is going on. I have no idea on what section what percentage should be set, so again it is hard to debug. You probably have a clear view of what your code does, but anyone new to the code has no idea. If you mabye can make it simpler, just two sections and describe in the section, this should be 10 on mobile and 40 on desktop. 

 

As far as I can see you set the percentage with this.mobilePercentages = [10, 50, 30, 90] & this.desktopPercentages = [20, 80, 70, 10], there is no 0 in there, so I can't see how it would ever get back to 0? I've created a new .percentage div which gets updated with the current percentage, so we can visually see which number get set. 

 

See the Pen RwEGazq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen