Clickable progress bar

[DevC]

Hi, I have this autoplay progress bar below. I've added clickHandlers to [Step 1, etc] and the bar zooms to the clicked step and stops, but I'm having a bit of trouble organizing the accompanying tweens.
 

1. Animating the active step label and the previous.
2. Transitioning the slide.

Thank you!

See the Pen xxMOqdL by dcha (@dcha) on CodePen

Edited October 31, 2023 by DevC
progress

[mvaneijgen]

Hi @DevC ,

 

Why not manipulate the timeline you've already created? That is what GSAP is made for! You have to figure out what the best points are you want to show I've now just increment by 33% of the timeline (that splits it nice in thirds), but you can set it to any specific point. And you want to figure out what you want to do when you're at a specific slide, right now I've paused the timeline.

 

Oh and sidenote: I've changed your progress bar animation I've removed the width: 0% from the CSS converted it to a .from() tween and animate the scale instead of width.

 

Hope it helps and happy tweening! 

 

See the Pen yLZJpQa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[DevC]

@mvaneijgen looking good thanks. Is it possible to animate `progress` though? I'd like to have that little bar animation on click like in my initial try above.

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!