How can I do animation in ionic2 typescript project?


I’ve read that ionic2 use web-animation api, but I can’t find any information in the manual

I want do some custom animations like: flipping a button or some sort of that

where should I look ?

Thanks for any advices


google Animate.css if you are interested in that. Great animation library and only uses css so you can expect it to be fast. I never used it on cordova though so I don’t really know if it works correctly as it uses a lot of webkit stuff.


Thanks for the heads up,

Just for curiosity, did ionic team write their own css animation ? cause it looks pretty fast


Looks like it but I don’t know


In my experience animate.css works just fine in Cordova applications. I wrote a tutorial a while back for using it with Ionic 1 apps, you might want to have a look at it.


I am no css expert, my hand written css animation seems choppy on devices even with translate3d/scale3d. But animation.scss(.css) works fine on device. It’s awesome !


it seems ng-enter-stagger not work in ionic2.
what should i do to define animation sequence?


How to implement in IONIC2 ??



How does it come that no one has mentioned angular 2’s animate yet?

See some examples:


I just wrote another article about animations with Angular 2. Especially on how to convert animations from Animate.css to “native” Angular 2 Animations. The tutorial is done with Angular Cli but you can use everything in any Ionic 2 project.

Full Code at GitHub - Tutorial Article