Jump to content

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

Need help with calling timeline on another element

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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
        //assign new currentAnimaiton and play it at normal speed
        flippy.currentAnimation = speakerFlipTL.play().timeScale(1);  




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.

  • Like 1
Link to comment
Share on other sites

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.




Link to comment
Share on other sites

ok, try this


//check to see if a card is open
          //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();



  • Like 1
Link to comment
Share on other sites

Thank you SO much!


That was a huge help.

Link to comment
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.