Jump to content
Search Community

progress bar animation advice

edhillis test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I'm looking for some general advice on possible approaches to a progress-type animation. The thing to be animated is this visual showing the percentage achieved towards a fundraising goal. This would be initiated by a scrollTrigger, I think, and the bar would animate from left to right by section (the leftmost yellow chevron would display, then the next chevron, etc.) as the numbers count up in the text dollar amount below.

 

progress_bar.thumb.png.e8894a3ed9645f40ba5e1f9eb3df2a7b.png

 

I'm asking here because it seems like a job for GSAP, but it also seems like it might be a pretty basic task so I'm not sure. What approach would you take to a project like this?  

 

Thanks for any feedback! -Ed

Link to comment
Share on other sites

For the animation of the shapes, it seems like it could be something really simple like each chevron is an image, and they are all hidden at the start, then revealed one by one in a timeline? Not sure if timeline is the right GSAP term or not. Simple would be good - as you can tell I'm very much a newbie!

Link to comment
Share on other sites

Welcome to the world of GSAP, @edhillis

 

Yep, it sounds like you're on the right track. We typically don't do this in these forums, but I wanted to get you going in the right direction so I took the time to whip together a quick demo that shows the concept. Obviously you'd replace the simple boxes with whatever shapes you want, but here's the general idea: 

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

 

Is that sorta what you were looking for?  

  • Like 5
Link to comment
Share on other sites

Thank you! This is very helpful. It's exactly what I'm looking for - except I was unclear about the relationship of progress to scrolling. I'm going for one of those bars that starts and completes its animation as soon as it comes in view, but I see I may be able to get there simply by setting "scrub" to false in your example. 

 

I'd also like to stop the progress at a certain percentage or other measure, like stopping it at 75% to show we're 3/4 of the way to the goal. I'll work on that and share the results here.

 

Again, many thanks!

Link to comment
Share on other sites

Here are edits I've made to make it autoplay:

 

scrub: false,

pin: false,

end: "top 8px" // I set this equal to the start value after finding that other values seemed to cause the animation to restart and fully complete (see percentage below)  on further scrolling


...and play only a percentage of the animation:

 

tl.from(...).tweenTo(tl.duration() * 0.75);

 

Got the previous from this post:

 

If any of this is wrongheaded please let me know.

 

See the Pen poOaeWW by edhillis (@edhillis) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

Thanks very much, Rodrigo! This looks like it shows the functionality I need and more. I only need to have a dollar amount shown when a single scroll start is reached - it's a single event rather than several as in your example - but it's terrific to see how you would do multiple amounts like this. The code I wrote did not wait until the scroll start was reached, but ran to the specified percentage as soon as the page loaded - and then ran the rest of the way to 100% when the scroll start WAS reached! So this is a great help. Many thanks 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...