ScrollTrigger on TimeLine - unwanted behaviour

[BobbyMcBobbyboy]

Hello!

 

I have tried to use ScrollTrigger on TimeLineLite in order to not declare it on every single operation.

However when I do that the animation does not start until circa 50% after the start indicator passes the scroller-mark (as seen in the attached codepen).

 

A workaround would be 

 

// instead of this
tl2.to('.l', { x: -200 }, 1);
tl2.to('.r', { x: 200 }, 1);

// to use this
tl2.to('.l', { x: -200, scrollTrigger: { ... } }, 1);
tl2.to('.r', { x: 200, scrollTrigger: { ... } }, 1);

which is not something I wanna do.

 

Do you have any idea on how to overcome that issue?

See the Pen VweMBLv by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

[GreenSock]

From what I can tell, it's working perfectly. You inserted all your tweens 1-second into the timeline (using the position parameter), and they all last 0.5 seconds (the default), thus the first 2/3rds of the timeline has nothing happening. See what I mean? 

 

Why are you inserting everything 1 second into the timeline? 

 

Oh, and definitely DON'T nest ScrollTriggers like that (inside tweens inside a timeline). An animation should only have its playhead controlled by one thing. When you nest it like that, you're having the parent timeline AND the ScrollTrigger both trying to control the playhead(s) in different ways. See what I mean? 

[BobbyMcBobbyboy]

Oh, of course. Thanks for that hint. I am a newbie to the whole thing and still haven't gotten then full picture. I replaced the 1 with a 0 and everything works perfectly fine. 

)

And yes. I understand what you mean. I shouldn't spread the responsibility across the playheads. Gets them and me confused