Jump to content
Search Community

Progress Bar works 90%+ of the time, but sometimes breaks on resize

aw55566 test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

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):

  1. I got rid of pinSpacing: false;
  2. I usedsaveStyles(this.progressWrapper, this.progressBar)  
  3. I changed my CSS from heightto min-height
  4. 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.

 

See the Pen XWZwBdr by andrewwoan (@andrewwoan) on CodePen

Link to comment
Share on other sites

  • Solution
2 hours ago, aw55566 said:

window's innerHeight

So animating height isn't very performant.

You may have better luck setting the progress bar to height: 100vh; with a transform-origin: top center; then animating the scaleY from 0

gsap.from(progressBar, { scaleY: 0, scrollTrigger: { ... }}

 

This way you wont need to calculate the window's size on refresh.

  • Like 3
Link to comment
Share on other sites

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. 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...