progress bar animation advice

[edhillis]

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.

 

 

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

[edhillis]

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!

[GreenSock]

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?  

[edhillis]

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!

[edhillis]

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

[Rodrigo]

Hi,

 

I'm not 100% sure I follow exactly what you're trying to do, but hopefully this is closer to it:

See the Pen qBMoONR by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[edhillis]

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.