search

filipows / angular-animations

:sparkles: Easy, Reusable Animation Utility library for Angular
https://filipows.github.io/angular-animations
MIT License
628 stars 88 forks source link

How to do flip card using flip Y #74

Open Et3rnal opened 3 years ago

Et3rnal commented 3 years ago

I don't quite like the animation of flip and would like to have a simple card flip forward and backward. I found flipInY and flipOutY does that but I'm not able to combine the two in nice seamless card flip.

I tried to use delay and chined but was not able to get a seamless result. I assume there is a way to do that?

filipows commented 3 years ago

Hi @Et3rnal , thanks for your question. I'm worried that if I understood your case correctly, it's not possible with the current animations. I had a similar idea some time ago and have started working on flipCard animation, but didn't get back to that. Here's the WIP draft: https://github.com/filipows/angular-animations/tree/feat/flip-card-animation which looked like this:

angular-animations-flip-card

If that's what you're after, you can have a look at the source code. I think if more people would find it useful, it would be nice to add something similar to the lib.

Et3rnal commented 3 years ago

Hi @filipows Yep, this is what I'm looking for I didn't want to use another library or CSS I like how you implemented this. If this effect can be added to it would be awesome.

I will into the code