aw55566
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by aw55566
-
-
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 used
saveStyles(this.progressWrapper, this.progressBar)
-
I changed my CSS from
height
tomin-height
-
I changed
height
to100%
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.
See the Pen XWZwBdr by andrewwoan (@andrewwoan) on CodePen
-
I got rid of
Progress Bar works 90%+ of the time, but sometimes breaks on resize
in GSAP
Posted
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.