Jump to content
GreenSock

runejensencom

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

Recommended Posts

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

Link to comment
Share on other sites

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! 💚

  • Like 1
Link to comment
Share on other sites

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

 

Glad to be on board.

 

  • Like 1
Link to comment
Share on other sites

One last thing:


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

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.
×