How to add duration to tween in pinnded section ?

[issam.seghir]

I have realized that when I pin a section to add animation on scroll, the duration of the timeline corresponds to the distance I scroll until reaching the end. For example, if the end  is at 4000px, the duration will be until I scroll to 4000px. However, I would like certain tweens in my timeline to animate for a longer duration compared to others. Unfortunately, when I add durations to my tweens, it seems that the duration doesn't have any effect. All my tweens still have the same duration. 

 

See the Pen jOXomxZ by issam_seghir (@issam_seghir) on CodePen

[GreenSock]

10 hours ago, issam.seghir said:

Unfortunately, when I add durations to my tweens, it seems that the duration doesn't have any effect. All my tweens still have the same duration. 

I think you might just be misperceiving things (an illusion). Think of the ScrollTrigger as if it's scrubbing the playhead across the timeline as you scroll, proportionally. So halfway through the scroll distance (2000px in this case), the timeline will be halfway done. So if you want some tweens to be longer than others, you just need to set them up proportionally. Of course it fits the entire duration of the timeline between the start/end scroll positions. 

 

So for example, if you have a 10-second tween followed by a 5-second tween, that first one would take up the first 2/3rds of that scrubbed timeline (2/3rds of the distance). It would be exactly the same if the first tween is 100 seconds and the second was 50 seconds (10x longer).

 

So set up your durations accordingly. 

[issam.seghir]

If you have a scroll trigger for a 2000px and the following timeline

tl.to("...", {duration: 2, ..})
.to("...", {duration: 4, ..})
.to("...", {duration: 6, ..})
.to("...", {duration: 0.01, ..})
.to("...", {duration: 2, ..})

The duration will be calculated in the following manner:
all durations : 2 + 4 +  6 + 0.01 + 2 =    14.01  = >  1000px
so: 
 duration: 2 =>  142.75   px
duration: 4 =>  285.51   px
duration: 6 =>  428.26 px
duration: 0.01  => 0.71  px
 duration: 2 =>  142.75   px