Any way to change navigation transition animation?

Ionic Framework Ionic React
1

Hello everyone!
I would like to know if there’s any easy way to change the default navigation transition to a “right to left” animation?

Right now the default animation is the “bottom to top” one, is there any property or option that would give me the “right to left” transition just like in iOS?

For example, I have a section in my app that is a breadcrumb selection and I would like that section to be animated from right to left with each selection the user does.

I hope you can help me or guide me what is the correct way of achieving this.

Thank you so much!

2
3

Hey Hills! Thanks for the reply, but that’s not quite what I’ve asked for. First of all, my post is about React Framework, and second of all, my problem is not with navigation, but with the transition animation that IonRouterOutlet performs when navigating between pages.

Thanks though!

4

Sorry posted the Angular one instead of React. Anyway within the ion-router tag there is a parameter you can used and create your custom animation effect.

ion-router: Router Component to Coordinate URL Navigation.

here is a video tutorial on how to make your own custom animation: Ionic - Custom page transitions - YouTube

the example shown is in a angular project but should still be the same concept.

reference: Animations: Web Animations API to Build and Run on Ionic Apps

1 Like