How can I show elements one by one on scroll while making the line element grow 90% of its container?

[firesale_999]

Hi, as mentioned in title I want to show the elements one by one on screen on scroll while make line element grow vertically like a roadmap kinda view. And also I need to add active class to milestone-stone element so that it indicates the active element and give it a cool effect  

Thanks a lot in advance 🙏.

See the Pen RwqJepY by Xteripus (@Xteripus) on CodePen

[mvaneijgen]

Hi @firesale_999 welcome to the forum!

 

Great frist try! But I have a suggestion. You're on the GSAP forum, so you're going to get GSAP solutions, the growing of the line is not wrong, but why not GSAP?

 

Also there is a way of thinking when working with ScrollTrigger. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in, this way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've created a timeline for all your miles stones, so that they will play one after each other, then I add the line animation at the end of that timeline, but tell it to start at the beginning of the timeline. Then I also make it that it duration is 0.2 * the number of milestones.

 

As stated before, removing ScrollTrigger at this stage is really helpful, because if the animation is not 100% correct the ScrollTrigger will never be correct. You could of course keep toggling ScrollTrigger on and off in this process to see how it is doing. I've used a lot of tools from GSAP in this demo, so if you want more info on anything please ask (I've also placed comments in the JS to better explain things) and you could also check these pages which have some really great info in them. Hope it helps and happy tweening! 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

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

 

[firesale_999]

Hi, thank you for your reply.

I didn't use gsap on line because I couldn't find a way to work around it. But I guess you did it 🚀

I have looked the docs but I couldn't find the things that I need.

Can you give me the full code of what I need so that I can debug it by console logging everything to understand?

Thanks a lot. 

[mvaneijgen]

2 minutes ago, firesale_999 said:

Can you give me the full code of what I need so that I can debug it by console logging everything to understand?

What do you mean? What do you want to know? The above pen is the 'full code' that makes the animation work. The ScrollTrigger object is disabled, but you can remove the JS comments (remove all the // characters) 

[firesale_999]

I tried but it didn't work on me while scrolling, am I doing something wrong?
I want to show the milestone elements one by one on screen with the fade-in effect when scrolling and make the line grow vertically. And add active class to milestone-stone element of the shown milestone element so that it indicates the active state.

[mvaneijgen]

Please post what you've tried, so that we can see what is not working and why.

 

Here is the pen with ScrollTrigger enabled and the dot gets a color red when it is active. (not done via a class, but with GSAP)

 

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