Jump to content
GreenSock

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

Need help with calling timeline on another element

Go to solution Solved by Carl,

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

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 post
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
        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.

  • Like 1
Link to post
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.

 

Cheers

M

Link to post
Share on other sites

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

  • Like 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.

×