Using ThrowPropsPlugin with a timeline

[ChrisA]

Hi all,

 

Could you tell me what would be the best way to apply the ThrowPropsPlugin to control the "time" of a TimelineMax instance? I don't mean adding ThrowProps to a Timeline, instead I want to control the timeline.time and to move to specific labels within that timeline.

 

Currently I am just using the following to tween to a specific label within the timeline:

myTimeline.tweenTo( label )

 

Can I use ThrowProps withing the object params of tweenTo? Or is it best to use:

ThrowPropsPlugin.to( timeline, { params... } )

 

Thanks in advance

Chris

[Rodrigo]

Hi Chris and welcome to the Greensock forums.

 

Yes, one of the most amazing features of the engine is that you can tween any numeric value of any object. Since a Tween/Timeline instance is an object and the time is a numeric value you can tween it using ThrowProps.

var tl = new TimelineLite();

tl.to(element, time, {vars});

TweenLite.to(tl, time, {ThrowProps:
    {
      time:value
    }
});

I've set up a simple codepen showing how you can do it:

 

See the Pen utGCk by rhernando (@rhernando) on CodePen

 

As you can see when you use the ThrowProps plugin you set a certain time, but because of the inertia behaviour of the plugin the final time is bigger than the original time.

 

Also keep in mind that every tween/timeline instance has other numeric properties such timeScale and progress, so you can also tween those.

 

As well in this case the ThrowProps is a tween instance as well, so you could tween the progress, of the instance that tweens the time of another instance.... mind-bending right?

 

Rodrigo.

[GreenSock]

Also keep in mind that the throwProps value is the velocity, not the end value. However, you can define an end value or a set of max/min values using the object syntax, like throwProps:{time:{velocity:1, max:3, min:0}}

 

Also, you can have it automatically track the velocity for you so that you don't have to define it at all - do that using ThrowPropsPlugin.track(yourTarget, "propertyName") so in this case, ThrowPropsPlugin.track(tl, "time");

 

Lots of options

 

But honestly, I'm not quite sure why you'd need to use a throwProps tween on a timeline's time - in most cases it'd be better to just use a tl.tweenTo() or if you're looking to slow the timeline down, you can simply tween its timeScale so that it smoothly decelerates. 

[ChrisA]

Thanks guys that's a great help. I'll let you know if I have any other questions,

 

Cheers,

Chris

[Rodrigo]

But honestly, I'm not quite sure why you'd need to use a throwProps tween on a timeline's time - in most cases it'd be better to just use a tl.tweenTo() or if you're looking to slow the timeline down, you can simply tween its timeScale so that it smoothly decelerates. 

 

Yep Jack is right, I totally forgot that Carl created a great sample of smoothly decelerate a tween, you can check it here:

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

 

Rodrigo.