Add extra 'padding/time' to end of an animation

[fakesamgregory]

I have a ScrollTrigger that pins the animation.

 

The issue is that as soon as the animation completes, scrolling continues. 

 

I would like to add an extra bit of space to the animation where nothing really happens, the user is just delayed slightly before scrolling continues after the end of the animation.

[Carl]

to add empty space / time to the end of a timeline you can add a tween on an empty object with the duration of your choosing

tl.to("#someThing", {x:300, duration:1})

   .to({}, {duration:3}) // adds 3 seconds of time at end

 

[fakesamgregory]

Thank you @Carl I thought about something like this. Didn't know the syntax but this absolutely works.

 

I'd be interested to hear if this is an endorsed method or if indeed tweens/timelines have a property built in for this type of thing.

[GreenSock]

8 hours ago, fakesamgregory said:

I'd be interested to hear if this is an endorsed method or if indeed tweens/timelines have a property built in for this type of thing.

That is an officially endorsed way of doing it