Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Cloud Media Lab

Smooth Transition out of overwritten property tween?

Recommended Posts

Hello all,

 

Does anyone know a relatively easy way to transition from one tween to another? Sort of a soft / blended overwrite? That's a bad way of saying it, so I'll give an example.

 

Assume the OverwriteManager is running in a default mode for TweenMax.

I run a tween that sends a box from x:100 to x:500 over 3 seconds

 

TweenMax.fromTo(box, 3, {x:100}, {x:500});

2 seconds in, I send the box back to x:100. Maybe in real life this trigger by a user interaction that could happen at any time during the run of the tween above.

 

TweenMax.to(box, 1, {x:100, delay:2});

 

On screen, this will result in the box abruptly changing direction.

 

Is there a generalized way to transition it dynamically, instead of the abrupt reversal? The box would travel to the right for 2 seconds, then when the new tween on x kicks in, it would decelerate, reverse direction, and arrive back at x:100 in the specified 1 second.

 

I was thinking ThrowPropsPlugin, maybe. Any advice?

 

-- Josh

 

 

Link to post
Share on other sites

Hi,

 

Your question was exceptionally clear, thank you. That would be an impressive feature.

 

I had to think a bit, but if you know which tween it is that you want to interrupt  you can tween the timeScale of that tween to 0 over the course of 0.5 seconds and then

 

-reverse the tween

-bring the timeScale back to 1 over the course of 0.5 seconds 

 

This will give you that kind of "oh woops I passed where i was going, better slow down and head back" effect that you described.

 

Try this in a blank fla with mc on the stage. Click the stage 1 second after the tween starts.

 

 

 

import com.greensock.*;


var tween:TweenLite = TweenLite.fromTo(mc, 4, {x:0}, {x:500});


stage.addEventListener(MouseEvent.CLICK, blendBack);


function blendBack(e:MouseEvent):void{
var tl:TimelineLite = new TimelineLite();
//tween tween's timeScale to 0
tl.to(tween, 0.5, {timeScale:0})
//reverse the tween
.add(tween.reverse)
//tween the timeScale back to 1
.to(tween, 0.5, {timeScale:1});
}
 

After you slow down the tween with the timeScale(0) change, you don't have to reverse the same tween, you could just create a new one.

 

At the very least this tweening of the timeScale should give you a nice gradual slow down before you change directions.

 

As far as the system responding to an overwrite like this automatically, that would be quite an undertaking.

 

And yes, throwProps could be used to jump in and interrupt the current tween and match the current velocity of the object with a nice physics-based slow down, but I figured we'd start with something a little easier. 

Link to post
Share on other sites

Yes indeed - good idea. ThrowPropsPlugin is probably ideal here, but keep in mind that you'll need to track the velocity of the box so that you can feed that value to the ThrowPropsPlugin tween. And then you can simply set the "max" and "min" values to your target value so that it goes precisely there. 

 

Give me another day or two and I may have an even easier solution for you (not 100% sure yet, but I have an idea...)

Link to post
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.

×