Need help with calling timeline on another element

[MandyMadeThis 1 Likes (Newbie)]

I'm a little bit stumped on how to make this feature work...

 

I've got cards are flipping the way I'd like them to (Thank you GSAP!)

 

However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back)  to play in reverse (and go back to its starting position) and then the second card can flip over.

 

Much like this: http://www.google.com/landing/now/#cards/

 

Any help is GREATLY appreciated, as I can't figure out the proper way to achieve this effect. (you can see I get stumped at line 42 of the codepen)

 

 

 

See the Pen gprYvM?editors=001 by MandyMadeThis (@MandyMadeThis) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Thanks for taking the time to post the demo. Super helpful (and well done).

 

What I was able to quickly implement was assigning a flippy.currentAnimation which references the timeline of the "flipped/open card". Every time a card is flipped the currentAnimation reverses very fast and the new one plays.

 

Here is the meat:

 thisBox.on('click touchstart', 'p.view', function(e) {
        //play currentAnimation backwards twice as fast
        flippy.currentAnimation.reverse().timeScale(2);
        //assign new currentAnimaiton and play it at normal speed
        flippy.currentAnimation = speakerFlipTL.play().timeScale(1);  
      });

 

http://codepen.io/GreenSock/pen/jPqYVN?editors=001

 

It would also be possible to dynamically assign and remove an onReverseCallback to the currentAnimation so that the new card did not open until the current one reverses fully. 

 

I can be of more help with that tomorrow. Hopefully this helps you out in the short-term.

[MandyMadeThis 1 Likes (Newbie)]

Thanks for responding so quickly! The timeScale solution isn't quite what I need, but I'm looking forward to seeing how to implement the  onReverseCallback. That sounds like it will do exactly what I'm looking for.

 

Cheers

M

[Carl 9,066 Likes (Superhero)]

ok, try this

 

//check to see if a card is open
        if(flippy.currentAnimation){
          //reverse current animation and add an onReverseComplete callback that will fire the next animation
flippy.currentAnimation.reverse().eventCallback("onReverseComplete", function() {
          //its important to remove the onReverseComplete callback as soon as it fires because you do not want it to fire if someone opens a card and then closes it using the "x" button.
          this.eventCallback("onReverseComplete", null);
          flippy.currentAnimation = speakerFlipTL.play();
         });
        } else {
         flippy.currentAnimation = speakerFlipTL.play();
        }
   
      });

 

http://codepen.io/GreenSock/pen/waGXRd?editors=001

[MandyMadeThis 1 Likes (Newbie)]

Thank you SO much!

 

That was a huge help.