Search code examples
javascriptreversetimelinegsap

TimelineMax reverse tweens once

I'm wondering if there is a way to reverse tweens inside a timeline once they finished animating. I want to scale elements and change their color. After that I want to reverse the animation. I tried with yoyo() but that method unfortunately plays the animations 3 times even when I set repeat: 1 (it animates 1-2-3-3-2-1-1-2-3-3-2-1).

    introTimeline.append(  TweenMax.to($(".Element"), 1, {scale: 2, 
    fill: "red", ease: Power2.easeIn, repeat: 1, yoyo: 
    true})  );

All I need is 1-2-3-3-2-1 for each tween in the timeline …

Is timeline the wrong way to approach this?

Come on does really know an answer to such a simple question … ?

Solution

  • You can just reverse the animation once the tween is complete. Use the following code:

    var tl = new TimelineMax({
  onComplete:complete,
});


tl.to("img", 3, {rotation:360, transformOrigin:"150px 150px", ease:Linear.easeNone});

function complete(tl) {
  tl.restart(); // 0 sets the playhead at the end of the animation
}