Jump to content
Search Community

Add more time to TweenMax.to (Blitmask)

NoAim test
Moderator Tag

Recommended Posts

Hey Guys,

 

I'm trying to have a small scroller which displays a specific value from a server. Since I'm not waiting for the response of the server - I already start the TweenMax.to for the Blitmask so the scroller seems to choose the value.

 

For the case that the server needs longer than 3 seconds I want to extend the duration without interrupting the current tween. How can I easily update the target x position or the duration of the tween?

 

Cheers!

Link to comment
Share on other sites

If you change the duration() mid-tween you are going to have an unsightly jump.

 

Imagine you need to tween x from 0 to 100 over the course of 1 second

 

TweenLite.to(mc, 1, {x:100, ease:Linear.easeNone});

 

Halfway through at 0.5 seconds you would expect x to be 50.

 

Now if at 0.5 seconds you set duration(2), the x value at 0.5 seconds of a 2 second tween would only be a quarter of the distance, jumping back to x = 25.

 

The best solution that will allow you to smoothly change the duration and final x position is to use ThrowPropsPlugin.

ThrowProps will be able to match the velocity of x, create a new tween with that same velocity and end at any new x value you want.

 

http://greensock.com/asdocs/com/greensock/plugins/ThrowPropsPlugin.html

 

ThrowProps is available to Club GreenSock members: http:www.greensock.com/club

 

---

 

if you don't need that level of sophistication another option to make the tween seem longer but end at the same pre-defined ending x value is to tween the current time() of the tween. This might take some mind-bending but you can basically tell the tween that you will tween it's time() value over the course of X seconds.

 

Check out this example which takes a tween that should be 3 seconds long and after 1 second I extend its play time by 6 seconds:

 

var t = TweenMax.to("h2", 3, {x:400});


TweenLite.delayedCall(1, extend);


function extend() {
TweenLite.to(t, 6, {time:3})
}

 

It's an HTML5 example but the same syntax and concepts apply to AS3

 

http://codepen.io/anon/pen/EKdmgG?editors=0010

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.
×
×
  • Create New...