aw55566

Thank you, I've adjusted the code with fromTo as well as with scaleY and it seems to work 100% of the time whenever I resize my browser window. The only exception is when I resize it with DevTools in Chrome with (CTRL+SHIFT+I) -> responsive mode. When I resize the width in this mode it breaks (sometimes). I guess my shortcut has its drawbacks lol. Maybe I should just do the math. Thank you again.

I'm using ScrollTrigger to create progress bars for each section. For each of these sections, I put the starting trigger at the top and the ending at the bottom, and I set the height of a progress bar to go to the window's innerHeight. Additionally, I pin the <div> wrapper in which the progress bar is inside of. This gives the illusion of a progress bar that works without any mathematical calculations. If you look at the codepen, it works as it currently is, but it breaks on resize. Most of the time it works on resize and there seems to be no pattern to when it breaks. Here are some other things I tried but it still has the same issue - works 90%+ of the time on resize (with some slight differences): I got rid of pinSpacing: false; I usedsaveStyles(this.progressWrapper, this.progressBar) I changed my CSS from heightto min-height I changed heightto 100% for .progress-wrapper It's pretty difficult to recreate the error by resizing since it works most of the time, so I made a video that illustrates when it breaks. I've tried on Edge, Chrome, Firefox and Brave (and CodePen itself) and they all have the same error as shown in the video.