How to make both my timelines take the same length of time to complete the animations (10 seconds)

[k1ngy.eth]

PLease delete

 

[Trapti]

Calculate the duration of each tween and the overlapping of it and adjust. 
By default duration is 0.5 for each tween. 

Duration property on scrollTrigger will no work.

Total duration of tl3 is 11*0.5 = 5.5.

In the tl2 timeline if you give duration 1 to the first tween. So the total duration becomes 2.75. See what factor you can add to duration each tween to get 10. 

I hope this helps. I don't think there is a direct way to make total duration of a timeline except if you are using stagger. 
 

[Rodrigo]

Hi,

 

Is really hard to troubleshoot without a minimal demo, based on the code you just posted.

 

The one thing that I can see is that you are setting a duration to the ScrollTrigger instance. ScrollTrigger doesn't work based on time but in the current scroll position, especially since you are using scrub: true or with some numeric value passed to it.

 

I strongly recommend you to take a look at the ScrollTrigger docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also take a look at this video @Cassie made in order to get a better grasp on working with ScrollTrigger based animations:

Happy Tweening!