scrolltriger Making "a timeline" with Scroll Trigger

[Lins]

Hi GSAP team,
I often use GSAP for a long time but just "copy pasting" the codes....
And now, I really want to expert it  (going to buy your license in near time!)

I have a couple question, actually a lot...
Hope you can bear with me  

 

1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes.

2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out)

3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area
 

4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved)

 

I'm so sorry if my question is too da*n much, hope any of you can help me out.

Thank you, so so much!
 

See the Pen KKJQXYm by aditlin (@aditlin) on CodePen

[GreenSock]

It's great to hear that you're jumping in to learn the tools more, @Lins

 

Usually it's best to just tackle one thing at a time instead of cramming 4 questions into one post which can be a bit overwhelming. I'm not entirely sure what you're trying to do, so I can't assess what is "good" or "bad", but maybe this is a good starting point?: 

See the Pen yLZvKpj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 This looked very odd to me: 

"top bottom+=-25%"

Did you mean?: 

"top bottom-=25%"

Which would be more simply written as: 

"top 75%"

Anyway, I hope that gets you going in a good direction. 

[Lins]

3 hours ago, GreenSock said:

It's great to hear that you're jumping in to learn the tools more, @Lins

 

Usually it's best to just tackle one thing at a time instead of cramming 4 questions into one post which can be a bit overwhelming. I'm not entirely sure what you're trying to do, so I can't assess what is "good" or "bad", but maybe this is a good starting point?: 

 

 

 

 This looked very odd to me: 

"top bottom+=-25%"

Did you mean?: 

Which would be more simply written as: 

"top 75%"

Anyway, I hope that gets you going in a good direction. 

@GreenSock Hi there!
Aight! thank you, next time I will ask step by step to make it easier.

 

Thanks to fix my codes! Yes, you are right! What I mean is  

"top bottom-=25%"

And yes, that's exactly what I want!
 

But I don't want to remove "active" class *except* User scroll back to top.

I tweaks the codes from your last fix, but when I scroll to top, all active class on List removed instantly. What I want is each Item removed by scroll when the User scroll back to top

 

Sorry if what I made confused you, I'll try to tweaks the codes a bit & explain here:
In this Strategy Section, user can scroll to bottom and the timeline move down like now (solved), however later when the User scroll down, the ".timeline-li.active" will trigger the image ".strategy-image .image" on the left to change / stack to another image.

Is it clearer now?

 

Just give me the clue, so I can learn from it and give back to you when its done!

**I already changes the codes

 

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Lins]

34 minutes ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo,
Yes this is exactly what I want!

I will add more function from here, thankies!