I want to create the progress bar on horizontal scroll

[Arkaprava101]

Hello , I am here once again (ˉ▽ˉ；).... The progress bar isn't working this time .So before It reaches the end of slider it goes to 100% . I have tried changing the trigger from .cards to .slider but it is still not working 😭 

See the Pen PogZpBg?editors=1010 by arkaprava99 (@arkaprava99) on CodePen

[mvaneijgen]

Just as a general note, as soon as you think you're going to need more then one ScrollTrigger, there will be probably an easier way to do it with one.

 

Timelines are the most powerful part of GSAP and is my opinion the best start point for any animation. So also in your case, you have two things you want to perfectly line up. If you put them on a timeline and use some clever position parameter they will be perfectly in sync. Then one ScrollTrigger that controls that timeline and your animation is hooked to the scroll bar of the visitor!

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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

[Arkaprava101]

Hello Sir , Thank you for the reply and the tips 😊. I had very few knowledge on gsap timeline and I wasn't very sure when and where to use that . Thanks to you now I will read the docs and try to get more info on it . The comments you have provided are very helpful . I am very much new to gsap and I was hard stuck on this . Thanks to you now I will continue with my project . Hope you have an amazing day sir 😊