current on click animation reverse:play

[raizo 2 Likes (Newbie)]

Hi there,

 

I wonder how I can achieve the animation to wait until it's reversed and play for the current item.

 

example. if I clicked a item animation the animation will play. click different item, reverse animation for current item and play animation for new current item.

 

please see my codepen

See the Pen bqQgbW by spaarwt001 (@spaarwt001) on CodePen

[Carl 9,066 Likes (Superhero)]

In simple terms you will need a few key components

1. a variable to reference the currentAnimaiton
2. a variable to reference the requestedAnimation (animation to play after currentAnimation reverses)
3. an onReverseComplete callback on each that will play the next requestedAnimation

unfortunately it would take too long to try to work it into your code, but this demo illustrates the core concepts.

 

 

$("button").each(function(index, element){
    //give each button an animation
    //tell it to animate a box based on its text. green button animates element with class .green
    //each animation has an onReverseComplete that calls the playRequestedAnimation() function which checks if there is a requestedAnimation.
    var tl = new TimelineLite({paused:true, onReverseComplete:playRequestedAnimation})
    tl.to("." + $(this).text(), 4, {y:200})
    this.animation = tl;
 });

$("button").click(function(){
  //every time you click a button update the requestedAnimaiton variable
  requestedAnimation = this.animation;
  console.log("requested animation for", $(this).text())
  if(currentAnimation){
    //if there is a currentAnimation tell it to reverse
    console.log("currentAnimation needs to be reversed")
    currentAnimation.reverse();
  } else {
    playRequestedAnimation()
  }
  
  //if the requested animation is the currentAnimation, so imagine someone clicks a bunch of buttons like green, orange, green, you can skip over green reversing and orange playing forward entirely and just play green forward.
  if(requestedAnimation == currentAnimation){
    requestedAnimation.play();
  }
  
})


//when we are ready to play the requested animation tell it to play
//also update the currentAnimation to be the requestedAnimation
function playRequestedAnimation() {
  console.log("ready to play requested animation")
  requestedAnimation.play();
  currentAnimation = requestedAnimation;
}

http://codepen.io/GreenSock/pen/XMygdo?editors=0010

 

If you remove the comments and logs it is really just a few lines. 

I made the animations pretty slow so you can follow the console.log()s

You could even make the animations reverse faster and play forwards at normal speed by changing the timeScale()

 

If the user hits green to play the green animation and then hits orange and grey quickly, grey will be the latest requestedAnimation and will play directly after green is done reversing.

 

I was able to make this demo fairly quickly as its something I've done a few times. Please keep in mind though that we really have to focus on the GSAP API and not so much more complex logic and user-interaction like this.

 

Happy Tweening!

 

 

 

[vishalbhulku 7 Likes (Newbie)]

What if i want to play currentAnimation simultaneously while other reversing...

Please help...

[Sahil 2,541 Likes (Superhero)]

Check the demos in following thread by @OSUblake

 

 

[Acccent 358 Likes (Leader)]

On 12/03/2018 at 10:52 AM, webapp said:

What if i want to play currentAnimation simultaneously while other reversing...

Please help...

 

if you don't want to wait until the previous animation has reached its start position it's even easier:

1. save all the animations you'll use
2. have a null variable that you'll use to save the current animation
3. on click, first check if the variable is null, if not call .reverse() on it (will not happen on the very first click)
4. .play() the new animation
5. store the new animation in the variable
6. the next time you click, the previous animation will be stored in your variable so it will get reversed

 

[vishalbhulku 7 Likes (Newbie)]

Thanks a lot... @Sahil and @Acccent