How can I aHow can I create scroll animation?chieve this kind of scroll progress animation?

[rakibul-wdp]

I have a progress bar timeline and if I scroll an orange/red color will animate over the static progress bar. That means when I scroll red color will complete over the gray color (like on the image).

 

So, I need curve line with the step number and when I scroll it will complete the step animated way.

 

See the Pen NWegNVa by Md-Rakibul-Islam-the-decoder (@Md-Rakibul-Islam-the-decoder) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Toso]

@rakibul-wdp   maybe create 2 svg the orange one will be on the top and link it to the scroll with scrolltrigger and drawsvg 

[Carl]

@Toso has a great idea. I found this interesting so I did this with a clipPath on a group. I'm just animating an orange rectangle's scaleX inside the clipped group.

 

See the Pen gOZmQVZ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

If you need help hooking it up to ScrollTrigger and making it work with that curve going down, it's going to be a bit more work, and not something I can do for you, but hopefully you've got some ideas now to get started.