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

[idiakite]

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

[Cassie]

Hi there - you've added scrolltrigger into the defaults, so you're creating a scrollTrigger for each individual tween.

This is one of the most ocmmon ScrollTrigger mistakes - creating nested ScrollTriggers. This is an issue because it creates logic inconsistencies.

 

You have a timeline where tweens are arranged sequentially and triggered as a whole based on the timelines ScrollTrigger star and end points.

But then you ALSO have individual ScrollTriggers for each tween, which are trying to trigger those tweens at different trigger points. See how this would conflict?

 

Without the defaults scrolltrigger it works a ok.

See the Pen WNPjJad?editors=0011 by GreenSock (@GreenSock) on CodePen

[idiakite]

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

[Cassie]

Have you looked at the demo I attached? All the tweens are tied to the scroll progress. (scrub:true) - originally you didn't have scrub applied on the main scrolltrigger.

Could you look at it and then explain what is not working and how you would like it to work?

I can guarantee that no matter what you're trying to acheive nested scrolltriggers are not the solution here. 

[idiakite]

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 !!