How can I do animation in ionic2 typescript project?


#1

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


#2

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.


#3

Thanks for the heads up,

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


#4

Looks like it but I don’t know


#5

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.


#6

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 !


#7

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


#8

How to implement in IONIC2 ??

@ashteya


#9

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

https://angular.io/docs/ts/latest/guide/animations.html

See some examples:


#10

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