Ionic Native Page Transitions for iOS and Android

ionic-native-page-transitions

The standard Ionic page transitions already look very decent compared to older Cordova apps from some years ago. However, if you want some more typical native animations for your transitions there’s an easy way to get awesome truly native page transitions within your Ionic app.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

In this Quick Win we will use the Native Page Transitions plugin which allows to use different native animations instead of the regular ones.

Setup our App

We start with a blank new Ionic app, create 2 pages and install the needed Cordova plugin and the NPM package so go ahead and run:

To make use of the plugin we need to add it to our module, therefore open the src/app/app.module.ts and change it to:

That’s all we need for the setup! Remember that we are now using a Cordova plugin and have to test the animations on a real device or simulator, the browser won’t work in this case!

Using Native Page Transitions

For our example of the different transitions we don’t need a lot. The first view only contains a bunch of buttons so we can test the animations, so go ahead and change your src/home/home.html to:

As I said, really boring so far. Far more interesting is the according class!

To make us of the new transitions, we need to craft some options and call a specific transition we would like to have whenever we push a new page or set the root of our view.

The different animations are:

  • Slide: Slide in the next view, almost like it looks normally but a bit more native or Material design like
  • Flip: Flip over the page, a very classic animation but not used that much today
  • Fade: Fade in the next page, a very good looking animation for some places
  • Curl: Like rolling up a page from a book

With the according actions for our buttons we implement all of these, for some we also define additional options which you can check out on the official Cordova plugin page.

For some animations this examples uses setRoot instead of push because some the transitions were a bit mixed and the results were not so good looking. Just try different options with this example to see what works for you!

For now, open your src/pages/home/home.ts and insert:

Now we just need the actual second page to go back, so open the src/pages/second/second.html and change it to:

Again we use some animations to go back, but those are more or less the same with just a few parameters changed. Therefore, change your src/pages/second/second.ts to:

Now you can play around with your native transitions, and remember: This will only work on a device!

Inside your browser you won’t see these animations as the plugin is not available which uses the native SDKs for iOS and Android to achieve the animations.

What’s your favorite animation?

You can also find a video version of this Quick Win below!

  • Sharanagouda K

    How do I create page transitions like pop up when I click button