[Solved] Ionic 5 - Custom Page Animations

Ionic Framework
1

Hey everyone

TL;DR? How does one get custom page transitions to work in Ionic 5?

Long version:

I am having an issue using the new Animations in Ionic 5 to create custom page transitions.

My app is a Mobile Point of Sale that runs on a specific android device - not available for the mass public to be run on multiple types of devices. Due to the size/complexity of the app and the specifications of the device it can be laggy at times. To counter this, we implemented custom animations to create a perceived performance. However thanks to the latest version of Ionic, the overall performance has improved for the app - so many thanks to the Ionic Team. We still however need the custom animations in the app.

I have been able to get the modal animations to work thanks to help received in a previous post that I opened and closed. I have tried to use that same logic in my page animations but am not having much luck.

What I am trying to do is implement a page transition similar to that of iOS, whereby the current page will slide out and the new page will slide in. I have had some luck on this in that it applies the animation correctly. The animation however plays both the leave and enter animation at the same time which causes a ‘morphing’ of the 2 sets of markup on the 2 pages. So everything goes funky.

I have tried to implement it using this logic, but have had no success :disappointed:.

I have created a demo project on github to demonstrate this issue. If somebody could perhaps help me with this it would be most appreciated. There is a README.me describing how to re-create the issue.

This is a v5 project, using Angular 8 and Capacitor.

My Ionic info:

   Ionic CLI                     : 6.1.0 (/Users/euanscott/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res (update available: 0.10.0) : 0.8.0
   native-run (update available: 0.3.0)   : 0.2.8

System:

   NodeJS : v12.12.0 (/usr/local/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

Regards,
Euan

1 Like
2

This is what I have been able to get to work. It is animating the pages, however it is animating them in the wrong order (it is showing the page to add on-top and then animating it out. Then once the animation is complete it just magically shows the correct page).

Additionally, it seems like it is morphing the 2 pages in the animation so the content is being displayed incorrectly on the view.

Please note, the error being displayed at the end has to do with a seperate API call being made, not the animation itself.

ezgif.com-video-to-gif
ezgif.com-video-to-gif390×670 2.43 MB

3

So I’m planning a blog post on this to dive into more details, but you can see a simple example here

What tripped me up was that when are navigating back, the enter/leaving el are now different and need to be accounted for in that animation. This is noted in my demo.

6 Likes
4

Hi @mhartington

Thank you so much. Really do appreciate it. Looking forward to your blog post.

Regards,

5

is there any way to have different animations for different pages? Route Transitions in Angular do exactly what I need, but ion-router-outlet does not work with it.

6

Did you look at the example I posted?

It has an example of custom page transitions

3 Likes
7

Hi yes, and your example worked, but what if I want to specify different animations depending on the page I am loading. Like Page 1 slides in from left, Page 2 slides from bottom and etc.

Edit: I just saw your reply to my thread. I will wait until Ionic 5.2.

2 Likes
8

First of all thank you very much for your contribution. Can I also ask how to use different animation for each page? We initiate the animation in each page module?

9

Hi Mike,

I had a look at your page transition example and it works well if I run it. But when I try do the same in my own application, setting the navAnimations option doesn’t seem to have the same effect - it still uses the default animations.

What could I be doing wrong?

Ionic:

   Ionic CLI                     : 5.4.15 (C:\Users\Mike\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.2.1
   @angular-devkit/build-angular : 0.901.8
   @angular-devkit/schematics    : 9.1.8
   @angular/cli                  : 9.1.8
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

I copied the animation folder from the repo and updated app.module.ts:

    IonicModule.forRoot({
      navAnimation: fancyAnimation,
    }),

If I attach the debugger in chrome, I can see it is definitely still getting into the default transitions.

10

Turns out it was simply a case of clearing some cache. Not sure if it was the browser cache or the www folder, but clearing both resolved the problem.

11

@mhartington the blog post link

12

Did you find a way to do custom animation depending on what page you are on? In other words, override default animation for a specific navigation.

@mhartington do you know if this is possible? I can override the animation across the app, but would about when a specific navigation happens?

Thank you!

1 Like
13

Yes its possible if you open fancyAnimation class you can check element tag to find out which element is animating so you can put check on tagName to give particular animation to particular page.

14

In fancyAnimation lass use enteringPageEl.tagName to find out which page is going to animate.