Category Archives: Typescript

How to implement custom page transitions in an Ionic app

Ionic is a fantastic framework to write your own apps. It is based on Cordova and angular and enables you to quickly write good looking apps without too much effort.

Depending on the platform you use to start your app Ionic even comes with pre-defined page transitions to animate the navigation of one page to another. The standard page transition on iOS is a swipe from left or right. It looks like this:

The documentation for page transitions in Ionic however is quite confusing and as a beginner it took some time to understand what transitions are there and which should be used. The official documentation contains a page for the NativePageTransitions module, however I advise you not to use that. Not only that it hasn’t received any updates for a long time, but to do the animations the modules takes a screenshot of the starting and the landing page and is animating the two images. This seems a weird way to do that and the amount of open issues while not issues get closed speaks for itself.

What you should use, is an integrated feature of the Ionic NavController class which you already use to navigate between your pages. This feature is enabled by default (depending on the platform) but it can be configured with your navigation call too:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});  

With “animate: true” you turn on the animation (which is the standard setting) and “animation: transition” sets the animation to use to animate the page transition. Its a string and “transition” means to use the standard transition depending on the current platform. When you want to use the iOS transition on an android platform you can initiate the navigation like this:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});  

There are no other built-in transitions you can use (like slide-down, slide-up or scale-out) and I could find absolutely no official documentation how to implement a custom transition. However, there is a quasi-official way to implement your own transitions. Continue reading How to implement custom page transitions in an Ionic app