Animating cards on hover. Is this a good use case for the FLIP plugin?

[superunknown]

Hey everyone. I'm trying to use FLIP to animate these cards on hover, but every example I've seen of the FLIP pluing in action uses an onclick event. Is it a bad idea to use it with a mouseenter event? And what should I use for mouseout in case it's not? Would it be better to just create a timeline and animate that back and forth on mouseenter/out?

 

Basically I wanted to try FLIP because I think it's (maybe?) the only way to smoothly animate the layout changing from flex-direction: column to flex-direction: row on mouseenter, and the elements going from display:none to block. Am I wrong here?

 

Thanks! 

See the Pen MWGvJev by superunknown (@superunknown) on CodePen

[Rodrigo]

Hi,

 

I don't see any issues with using mouse enter/leave events for triggering Flip animations, they're just events as any others.

 

Here is your example using those events to animate the cards and the target card image as well:

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

 

Let us know if you have any other question.

 

Happy Tweening!

[superunknown]

Thank you so much, @Rodrigo!