Why is the router navigation push animation different on Android (looks like a modal) than on iOS?

Ionic Framework Ionic Vue
1

I am working on an application that runs on both iOS and Android. It’s build on Ionic Vue 7.3.3.

I use vue router to push new views to the navigation stack. For example:

Podcasts Overview => Single Podcast Detail

When the user selects a podcast on iOS and the router navigates to Podcast Detail the new view animates in from the right side like it is expected on iOS.

However on Android the animation looks different. It looks like opening a modal view.

Why is it different on Android and how can I change it?

I want to change it because it does not feel right on Android. For example in the Android Settings app views animate in from the right side when entering a deeper navigation level like on iOS.

2

By design, styles and animations differ between Android and iOS. Within Ionic you can opt for one or the other at will.

On a deeper level, all Android manufacturers will implement AOSP a little differently, adding their own animations to it. Samsung vs Pixel is a good example of this, two very different styles of animations. There isn’t a one-size fits all, it’s just different per phone.

If you want to force iOS theming styles (which I believe includes animations), then you can.

I believe there’s also a way to add your own animations if you want to put in the work yourself. That’s an a per component basis.

1 Like
3

Thank you very much for this explanation!

1 Like