[Scroll indicator/timeline and toggle class with scrolltrigger]

Hi @mvaneijgen now I understand thank you very much for your help I'll update my functions/modal to make it works !

[Scroll indicator/timeline and toggle class with scrolltrigger]

Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them.

I have two issues right now:
- about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ?
- I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point.

Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.

See the Pen vYbjBLp by idrissdiakite (@idrissdiakite) on CodePen

[Update color text (by chars) with scrolltrigger]

Thanks a lot @PointC I'll look into it for sure !

[Update color text (by chars) with scrolltrigger]

I'd like to update the text color when we scroll down but only chars by chars and not all the sentence in the same time.
It worked well when I tried word by word but not with chars. What I am missing ? Thanks in advance

See the Pen PoVEJMz by idrissdiakite (@idrissdiakite) on CodePen

[Timeline with scrolltrigger, how to play tweens not at the same time ?]

My bad I didn't see you added scrub on the main scrolltrigger, so this is what I was missing.

This is perfect thank you very much !!

[Timeline with scrolltrigger, how to play tweens not at the same time ?]

Hi, thanks for your reply !

I see what you mean, actually I first tried without the scrolltrigger defaults but the result wasn't what I wanted because yes all tweens are not playing at the same time BUT the timeline is playing from start to end even if we are not scrolling.

Icould be ok for playing the first 5 tweens without scrolling but I'd like to play at least the last 2 tweens according scrolling
For exemple for this one

.to(this.$span, { width: '83.5%' })

I want to anim the width only if we scroll down, how can I do that ? I need to include a scrolltrigger inside the tween itself ? But the best would be to attach all tweens to scrolltrigger like it was with the scrolltrigger defaults but without playing all tweens at the same time.. Sorry if it wasn't clear enough, hope it is now

[Timeline with scrolltrigger, how to play tweens not at the same time ?]

Hi there,

I'm trying to make an animation with scrolltrigger.
I made a timeline but all my tweens are playing at the same time, what am I missing ?

I want to play the last 4 tweens ONLY when the ones before are completed, how can I do that ? Do I have to create an other timeline ?
Any tips are welcome

See the Pen NWojMWb by idrissdiakite (@idrissdiakite) on CodePen