Is it possible to get 2 consecutive tweens to follow one overall ease?

[neuralism]

Hello all!

 

Is it possible to get 2 consecutive tweens to follow one overall ease?

 

let's say i have something like

 

squareA.x = 0;

squareB.x = 100;

 

var tl:TimelineMax = new TimelineMax({ });

 

tl.append(new TweenLite(squareA, ??, { x: 100 });

tl.append(new TweenLite(squareB, ??, { x: 500 });

 

I want squareB to start moving once squareA reaches it have whole thing to be one seamless animation with say Expo.easeOut.

 

so all in all the it should look like a square moving from 0 to 500 in one seamless motion with easing.

 

how can I go about this?

 

Thanks in advance!

[GreenSock]

Absolutely. Prepare for some ninja tweening moves...

 

Just put both tweens into a TimelineLite and make sure they use the Linear.easeNone ease. Pause the TimelineLite. Then simply tween that TimelineLite's currentTime property using any ease you want. Like:

 

var tl:TimelineLite = new TimelineLite({paused:true});
tl.append( new TweenLite(squareA, 2, {x:100, ease:Linear.easeNone}) );
tl.append( new TweenLite(squareB, 2, {x:500, ease:Linear.easeNone}) );

//now for the magic...
TweenLite.to(tl, tl.duration, {currentTime:tl.duration, ease:Expo.easeOut});

 

Wax on, wax off Daniel son.

[Carl]

I have 2 approaches:

 

Create 1 tween to move squareA from 0 to 500. This tween will have an onUpdate callback that will set squareB.x = squareA.x if squareA.x is greater than 100:

 

squareA.x = 0;
squareB.x = 100;
var tl:TimelineMax = new TimelineMax({ });
tl.append(new TweenLite(squareA, 8, { x: 500, ease:Expo.easeOut, onUpdate:moveB }));
function moveB():void{
 if(squareA.x > 100){
  squareB.x = squareA.x;
  }
}

 

A better solution is to create a timeline that contains 2 tweens with Linear.easeNone eases.

You then use a TweenLite to tween the currentProgress of the Timeline with an Expo ease. So basically you are tweening a timeline. This concept is discussed in depth here:

 

http://www.snorkl.tv/2011/03/tween-a-timelinelite-for-ultimate-sequencing-control-and-flexibillity/

 

Try this code:

 

squareA.x = 0;
squareB.x = 100;
var tl:TimelineMax = new TimelineMax({ paused:true });
//try rate of 50px per second
//every 100px travelled takes 2 seconds
tl.insert(new TweenLite(squareA, 10, { x: 500, ease:Linear.easeNone }));
tl.insert(new TweenLite(squareB, 8, { x: 500, ease:Linear.easeNone }), 2);
TweenLite.to(tl, 10, {currentProgress:1, ease:Expo.easeOut});

[Carl]

greensock beat me again!

 

so all in all the it should look like a square moving from 0 to 500 in one seamless motion with easing.

 

just to clarify the differences in our responses. I was under the impression that once squareA met squareB they both should continue on to 500. I read the above as "it should look like one square"

 

either way, you have a variety of solutions:) but I would suggest skipping my first 1 as "keeping it all in the timeline" is the way to go.

[neuralism]

Thank you geniuses! You guys just saved my life lol. It works like a charm XD

 

I'll need to go read up more to fully understand the mechanics of the code better.

 

I'm having one more issue though and that is getting it to reverse once the user does a ROLL_OUT on a hitArea. It's not working and I'm not sure what I'm doing it wrong, using tl.reverse(); at the moment

 

 squareA.x = 0;
 sqaureB.x = 100;

 hit_Area.addEventListener(MouseEvent.ROLL_OVER, handler);
 hit_Area.addEventListener(MouseEvent.ROLL_OUT, handler);

 public function handler(event:MouseEvent):void
 {
  var tl:TimelineMax = new TimelineMax({ paused:true });

  tl.append(new TweenMax(squareA, 0.4, { x: 100, ease:Linear.easeNone }));
  tl.append(new TweenMax(squareB, 0.3, { x: 500, ease:Linear.easeNone }));

  if (event.type == MouseEvent.ROLL_OVER)
  {
TweenMax.to(tl, tl.duration, { currentTime: tl.duration, ease:Expo.easeOut });
  }

  if (event.type == MouseEvent.ROLL_OUT)
  {
tl.reverse();
  }
 }

[Carl]

The problem is that you are creating a fresh timeline every time you roll over and out.

 

If you reverse a timeline immediately after it is built nothing will happen as the currentTime is already at 0.

 

You should create your timeline once outside of handler(). Then your handler function will smoothly play and reverse it on roll over/out.

 

Make sense?

[GreenSock]

And remember that the tween (not the timeline) is the thing that's driving the animation, so you'd want to reverse() the tween rather than the timeline. I suspect this is what you meant to do:

 

squareA.x = 0;
sqaureB.x = 100;

var tl:TimelineLite = new TimelineLite({paused:true});
tl.append(new TweenMax(squareA, 0.4, { x: 100, ease:Linear.easeNone }));
tl.append(new TweenMax(squareB, 0.3, { x: 500, ease:Linear.easeNone }));
var tween:TweenLite = new TweenLite(tl, tl.duration, {currentTime:tl.duration, ease:Expo.easeOut, paused:true});

hit_Area.addEventListener(MouseEvent.ROLL_OVER, handler);
hit_Area.addEventListener(MouseEvent.ROLL_OUT, handler);

public function handler(event:MouseEvent):void {
   if (event.type == MouseEvent.ROLL_OVER) {
       tween.play();
   } else if (event.type == MouseEvent.ROLL_OUT) {
       tween.reverse();
   }
}

[Carl]

ah, yes, I meant "play and reverse the tween". good catch. thanks!

[neuralism]

Thank you so much guys!

 

Though I'm still having problems (probably because of my ****** AS skiils) but I've managed to tide through!

 

I'll explain again when I have the time!