Flip animation on card click

[Josh Mathis]

I am trying to use the flip plugin to "reveal" information on a card click/hover. So, in the default state, there would be a card that just shows the title, and then on click, the title would slide-up, and the description and a button would be revealed. I'll also say that I'm pretty inexperienced with gsap and trying to learn more, so this may be the complete wrong way of even going about things. The flip animation is working partly, but it's only sliding the title up, not revealing the description and button. Any help/guidance/direction would be greatly appreciated.

 

This first image is what it's currently doing, and the next image is what I'd like it to do.

See the Pen ExwGZpL?editors=1111 by joshmath (@joshmath) on CodePen

[OSUblake]

Welcome to the forums @Josh Mathis

 

I'm not sure this a good use case for Flip, but here's a demo anyways.

 

See the Pen GRMebjQ by GreenSock (@GreenSock) on CodePen

 

The desc and button don't fade out with Flip because it needs absolute to be set to true, and your current layout will mess the layout up.

 

Quote

onLeave

Function - A callback that's called if/when a target is in the original state but not the end state, or if it isn't in the document flow in the end state (like display: none). Since there is no position/size data to compare to in the end state, it won't be included in the flip animation, but the callback receives an Array of the leaving elements as a parameter so that you can animate them as you please (like fade them out). IMPORTANT: these elements won't be visible unless you also set absolute: true (otherwise, it'd throw off document flow). If absolute: true is set, it will force display to whatever it was in the previous state and then revert it back at the end of the flip. Any animation returned by this callback will get added to the flip timeline so that it gets forced to completion if a competing flip interrupts it. For example:

 

I would probably do this just as normal timeline animation. I would have overflow to hidden on the card, have the overflow full height, and then just animate the text up.

 

[Josh Mathis]

@OSUblake Thank you very much for the help, and what you said totally makes sense. I actually started out doing it as a normal timeline animation, but then after reading more about flip recently, I thought that might be the way to go since i was essentially toggling between two states. It should have been a clue when I couldn't find any examples of flip doing what I was wanting. Again, thank you for the demo and the advice.

[Josh Mathis]

@OSUblake First of all, I'm not sure if i'm supposed to keep tagging you for more help on this same issue, so if that's against the forum etiquette, I'm sorry and I promise to learn from my mistakes 😃.

I took a stab at doing this with just a regular timeline -- it turns out I was overly confident yesterday when I replied to you acting like that would be no big deal for me. I think, as far as the animation goes, what I did works and gives the proper effect, although I'm not sure I went about it in the most efficient manner. The main issue i'm running into is applying the animation on hover. It's only running for one instance of mouseenter + mouseleave, and then it doesn't run again. I'm assuming I need to tell it to "reset" things for the next instance, but I can't figure that one out. 

 

So, TL/DR question is: How do I "reset" a timeline after a hover event? 

 

Here's the link to the new pen: 

See the Pen JjrzgyZ by joshmath (@joshmath) on CodePen

 and again thank you for any help!

[OSUblake]

Right now you are selecting everything in the document, so you would need to select the elements in a particular card. You can do that with querySelector or GSAP's selector utility.

 

And I created your timelines on demand as you'll most likely run into issues maintaining 2 separate timelines. 

 

See the Pen KKXYQqQ by GreenSock (@GreenSock) on CodePen

 

[Josh Mathis]

Thanks again for the help @OSUblake. That makes complete sense and you're doing some things I hadn't come across yet (in my admittedly very small experience with gsap). So, not only did you help me out, but I feel like I learned how to do it right the next time. Thanks!