Jump to content
GreenSock

ChrisA

Using ThrowPropsPlugin with a timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

 

Cheers,

Chris

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×