Ionic animation documentation

Hi Ionic developers,

I’m pretty new to Ionic and are trying to build my first app with it.
The documentation regarding the different components is quite good but what i’m missing is some documentation about the different types of animation and how to apply those.
I’ve seen posts talking about animation="no-animation" properties or to add classes like "slide-left-right" but I can not find a good overview of all possible animations and how to apply them.

For instance I figured out I could stop the nav-bar animation by adding nav-bar-transition="android" to my body tag.
But this was totally a trial and error operation.
The ‘nav-bar-transition’ is never mentioned in any documentation as far as I can tell (and which options it could contain, ios and android I can guess, but are there more?).

Hopefully I’m mistaken and there is some documentation somewhere, if so could someone please tell me where to find it?


The handling has changed from Beta13 to 14

So the old css class animations were unnecessary with the new animations/transition system in beta 14.

We removed the old css animations are will be working on some new animations down the road.

Thanks for the reply.

That explains why the code snippets I found are outdated.
Is there any animations documentation coming up as well?
I find it a bit difficult to find some information about the different view animations that are possible at this moment in time.

Right now there are two styles of animations, ios and android.

We’ve listed the two types of animations you can have in your app in our config section.$ionicConfigProvider/

We will be working on expanding the view transition animation docs post 1.0.

is there the possibilty that the android-transitions does not work?

I did not looked into the code, but the animation is the same like on ios?


Their is some subtle differences between everything.

1 Like

I think my eyes are to lazy or i can not handle this amount of fps ^^

Thank you very much