Change page transition animation Ionic Angular

[Tommertom]

Hi all,

I am looking for the easiest way to change page transitions in Ionic Angular (using the angular router).

Just to check. Angular.io gives input on how to set page transition, which requires me to think a bit too much

Angular

This link seemed usefull too for one component (which is a requirement for me as well). But will have to test in Ionic5/angular (I assume it will work):

How to disable page transition animation in Ionic 4 / Angular?

I found the solution: IonicModule.forRoot({animated: false}); has to be within imports in app.module.ts, e.g. @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot({animated: false}), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] })

And Create a Custom Modal Page Transition Animation in Ionic | Josh Morony to the point of a modal

Any other pointers to great resources on this topic?

To what extend does Ionic actually define the transition in Ionic Angular?

Regards

Tom

[EinfachHans]

If you want to change the Animation all over the app, you can set the navAnimation in the Ionic Config. For a specific page-change, you can pass the animation in the NavigationOptions of the NavController.

[Tommertom]

Hi @EinfachHans !
Thanks for the prompt reply and pointers. Will experiment and give feedback. Indeed looking for more fine-grained control on navigation animation - not the global setting.
Regards
Tom

[Tommertom]

Pretty nice example here

Angular Example - Angular Animations Guide - StackBlitz