Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
raizo

current on click animation reverse:play

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

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!

 

 

 

  • Like 3
Link to post
Share on other sites
  • 11 months later...

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

Please help...

Link to post
Share on other sites
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

 

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

×