Issue when pin is true and scrub is set

[BebDev]

Hi there,

 

I want to create an animation where the pin is set to true and I want to use the scrub option, but because of the scrub, the pin ends before the animation really is complete.

 

Please check the orange section on this pen:

 

How can I make sure that pin ends when the animation reaches 100%

 

Any help is greatly appreciated.

 

Regards

See the Pen XWGoGqN by AbanobLeap (@AbanobLeap) on CodePen

[mvaneijgen]

You tell the scrub to lag behind 1.5 seconds, so the animation will do it's thing 1.5 seconds later than you want it, if you want to tie it to the scroll an make sure it is done when the ScrollTrigger is done you have to set scrub: true.

 

If you like the lag you can convert your tween to a timeline and add an extra (empty) tween to the timeline that does nothing, but because a timeline gets stretched over the total scroll distance your first tween will finish faster. Tweens by default have a duration of 0.5 seconds and here I've add an empty tween of half eg 0.25 seconds. You can play with the value to get it more like you want, but keep in mind duration does nothing with ScrollTrigger only your end: value will increase the scroll distance, it is just used as timing everything relative to other tweens. Hope it helps and happy tweening! 

 

See the Pen LYaMvmq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen