Jump to content


Updating rotation values of tweens inside an infinite timeline

Recommended Posts

Hello, I've got this code:


leanLeftTween = TweenMax.to(trapecista, 1, { rotation: -10, ease:Linear.easeNone } );
leanRightTween = TweenMax.to(trapecista, 1, { rotation: +10, ease:Linear.easeNone } );
leanBackLTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } );
leanBackRTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } );
var tremble:TimelineMax = new TimelineMax( { repeat: -1 } );
private function updateRotation():void {
	leanLeftTween.updateTo( { rotation: -30 } );
	leanRightTween.updateTo( { rotation: 30 } );



The rotation values are changed, but the animation seems to jump. I just want to increase/decrease the amplitude of the rotation tween on user interaction (using delayedCall is just to simplify code).


Any help?

Link to comment
Share on other sites



I don't think having 4 tweens in a timeline is going to make for a working solution.

When you update those 2 tweens, you're not accounting for the fact that the other 2 tweens will need their start values adjusted. The start values for all tweens are locked in once a tween plays for the first time. It gets really tricky especially since you don't know when the user is going to interact with the object. 


If the timeline plays once and then you update leftLeftTween, the next time leanBackLtween plays there will be a big gap.


This was actually quite a challenge for me but I have different approach. Just have 2 tweens that alternate via onComplete callbacks. One that rotates right and one that rotates left. When the left one is done, call a function that creates the right tween and use the current end rotation value. if the end rotation value changes due to user interaction, then just update the current tween.


Take a look here: http://www.snorkl.tv/dev/variableRotation/


Here is the code:




import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

TweenLite.defaultEase = Linear.easeNone;
var max:Number = 10;
var currentTween:TweenMax;
var currentDirection:String = "right";

function right(){
    currentTween = TweenMax.to(pointer, 1, {rotation:max, onComplete:left});
    currentDirection = "right";
function left(){
    currentTween = TweenMax.to(pointer, 1, {rotation:-max, onComplete:right});
    currentDirection = "left";

btn.addEventListener(MouseEvent.ROLL_OVER, over);
btn.addEventListener(MouseEvent.ROLL_OUT, out);

function over(e:MouseEvent):void{
    max = 50;
function out(e:MouseEvent):void{
    max = 10;
function updateCurrentTween(){
    if(currentDirection == "right"){

Timelines have many great uses, but in this case I can't think of a great way to create one that is flexible enough to adapt on the fly like that. 


I've attached a CS5 fla


Link to comment
Share on other sites

Thanks Carl,


Your solution works as a charm.


It's like you said: Timelines have many great uses and we tend to use them for almost everything. They are pretty cool, clean and packed with lot of funcionality but sometimes we get obsessed in using them when other solutions would work better.


Thanks for your time :)


  • Like 2
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.