Not able to create a vertical timeline

[Pain123]

Hello everyone,

Im new to Gsap, I'm trying to learn it. but right now I'm stuck at creating a vertical animated Timeline. i also applied scrollTrigger but my code is messed up!. Please look at my code. once and correct my mistake.

 

This is what i want to make :- https://youtu.be/qTeqwp7Uvro

 

and this is my code pen:- 

 

 

what i want is that.

1. when user scrollDown the height of the ".timeline-inner" will increase. and when the ".timeline-inner" hits the ".dot" of the specific box then the opacity of that's h2 and paragraph become 1

 

See the Pen abggwpx?editors=1000 by Mohit-Mishra-the-looper (@Mohit-Mishra-the-looper) on CodePen.

[mvaneijgen]

I would adjust your approach. You're going in to the animation from the scrolling angle, that will make everything a lot harder. I would forget everything that has to do with scrolling and first create the animation you want to happen.

 

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 created the first step in your animation, draw the line and at the same time fill the dots, if you want more too happen you have to add that to the animation and only when you're fully done can you add ScrollTrigger to the mix. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

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

[Pain123]

13 hours ago, mvaneijgen said:

I would adjust your approach. You're going in to the animation from the scrolling angle, that will make everything a lot harder. I would forget everything that has to do with scrolling and first create the animation you want to happen.

 

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 created the first step in your animation, draw the line and at the same time fill the dots, if you want more too happen you have to add that to the animation and only when you're fully done can you add ScrollTrigger to the mix. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

 

 

Sir this is my new version: 

 

See the Pen RwXbzpm?editors=0010 by Mohit-Mishra-the-looper (@Mohit-Mishra-the-looper) on CodePen.

 

Later, I added the ScrollTrigger because I want to control the animation by scrolling. Everything looks fine, but there are issues:

 

 

When the blue line touches the grey circle, only then the circle change its color to blue, and the opacity of the .box should change to 1. Right now, I can see that even when the blue line doesn't hit the circle, the circle is still changing its color to blue.  i tried to change the stragger amount to match the speed but it is not helping.

[mvaneijgen]

I'm not sure what the animation is that you want to happen, but you just have to fix the timing to have everything line up. 

 

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

[Pain123]

4 hours ago, mvaneijgen said:

I'm not sure what the animation is that you want to happen, but you just have to fix the timing to have everything line up. 

 

 

 

Sir i want to create this animation using GSAP : 

please watch this you tube video that i have uploaded

 https://youtu.be/qTeqwp7Uvro

[mvaneijgen]

Right, I would tween the opacity of the left and right section individually because the dot is also part of the whole box. So you can just add those tweens to the timeline and everything should work as you expect. I've also updated your ScrollTrigger code so if you comment that out it also works on scroll. The timing could still be better, but that is something that is easily changed. 

 

If you still need help, please fork one of the pens and modify to so you can show what you've already tried, that way we can see your though process and thus better help you understand the tools. 

 

Hope it helps and happy tweening! 

 

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

Edited September 23, 2024 by mvaneijgen
Add fork of new pen

[Pain123]

1 hour ago, mvaneijgen said:

Right, I would tween the opacity of the left and right section individually because the dot is also part of the whole box. So you can just add those tweens to the timeline and everything should work as you expect. I've also updated your ScrollTrigger code so if you comment that out it also works on scroll. The timing could still be better, but that is something that is easily changed. 

 

If you still need help, please fork one of the pens and modify to so you can show what you've already tried, that way we can see your though process and thus better help you understand the tools. 

 

Hope it helps and happy tweening! 

 

 

 

Thankyou sir this is what i needed.