Sticky Progress Count Number 0-100 while scrolling up/down

[runejensencom]

Hi guys - my first post here.

 

I am working on a sticky progress bar and a sticky percentage counter for a website in Webflow, that should animate the same time while scrolling from the top to bottom of a section. The progress bar are working fine, but I haven't figure out yet how to get the count number start and end animate like the progress bar.

 

Is this possible with another solution besides using - end:"500px" - in the gsap.timeline like I did? 

 

More precise - I want sticky counter number to trigger, when the viewport hits top of the container-large and stop animate, when the viewport hits the bottom of container-large.

 

Hope it makes sense  

 

 

 

See the Pen bGvgRbp by rune-jensen (@rune-jensen) on CodePen

[GreenSock]

Comments/suggestions:

• I don't think you need all those different ScrollTriggers and tweens. You could literally just use one (if I'm understanding your goal correctly). 
• When you set end: "500px" you're literally making it exactly 500px worth of scroll total (absolute). I wonder if you meant "+=500px" (relative)? But I don't think so because don't you want it to be dependent on how tall your container-large is? 
• I would recommend animating the scaleY instead of height because it's cheaper for the browser to render. 

Here's how I would handle it, but I may have misunderstood what you were looking for: 

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

 

I set it up so that you could have multiple sections like that and it'd automatically handle them (assuming you put the sticky-progress-bar stuff in each). 

 

Thanks for being a Club GreenSock member! 💚

[runejensencom]

Yes, that was exactly what I was looking for. It works great now. Can't thank you enough! 

 

Glad to be on board.

 

[runejensencom]

One last thing:

Is it possible to change the start value "0" - so it counts up from 1953 to 2022 and not 0-100?

[GreenSock]

Yep, the gsap.utils.mapRange() utility makes that pretty simple:

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