Ionic 5: navAnimation not working properly with tabs


I built an Angular based application featuring tabs, using a replacement navAnimation following the directions from Ionic 5 Animations Controller & Custom Page Transitions [v5] | Ionic Academy | Learn IonicIonic Academy | Learn Ionic

The animations trigger as expected with the normal routing, but as soon as I use tabs, the animation only triggers when switching from the same page component to itself (although it may use different parameters). So PageA → PageA will show the animation PageA → PageB will just replace the component without an animation. Debugging shows, that the animation is not even called.

I have tried a few things, but haven’t come up with a solution, or even a way to debug it. I think it may be a bug.

I have created a trimmed down version of my problem in a reference repo, which I think upgraded to the latest relevant libraries just to be sure (but I don’t have a lot of experience with that, so I might have done something wrong): GitHub - elpollodiablo/tabanimation

I would very much appreciate any input.

cheers from Vienna,

Ok, so I “solved” this for me by moving the logic of all tab pages into one Page Component, which will make this maintenance nightmare, but it apparently is my own fault in assuming that I can just do the animations in the end after all the other logic is done rather than making sure that the most basic UI requirements for a release are working.

Also, it doesn’t instill much confidence in the ionic platform that there wasn’t even an answer to this problem.

Hi there,

Navigation between tabs (I.e. Tab1 to Tab2) does not use animations by design. We try to follow mobile app conventions as closely as possible, and most stock iOS and Android applications do not have animations between tabs. If this is something you would like to see added to Ionic Framework, I recommend creating a feature request on our GitHub repo. Please be sure to include a use case as well as any workarounds you are currently using.

Also, I have found that questions are more likely to be answered if they are posted in the framework-specific sections of the forum. So if you are using Angular, I recommend posting in the Ionic Angular section. A lot of the people who are looking to help out tend to gravitate towards their framework area of expertise.

1 Like

Oh, ok. I followed the instructions in the Ionic Framework storefront, which say “This category is for all posts related to modern Ionic Framework, including Ionic Angular, Ionic React, and Ionic Vue. This includes all versions of Ionic Framework, from 4.0 and up.”

I did not realize that the links aren’t links to the documentation but actively disagree with the sentence they were used in.

edit: sorry to snap, there was a lot of frustration for me with this topic, overall I actually quite like ionic.

1 Like

Oh yeah you can absolutely post there, I have just found that posts are more likely to get replied to if they are posted in their framework-specific sections.

I actually tried to look where the best place is, and the prominent hint in the store front told me that it was there. Only now that you mentioned it I inspected the links :slight_smile:

Sorry for being a bit harsh before.

1 Like

No worries! Glad things are resolved.

The use case is the same as the other general nav animation. Make it prettier. Animation can help to see what exactly happens on screen. Anyway, it would be great if Ionic just allows to set the tab animations like navAnimation. Set it per default to undefined, if Ionic does not want it. But why limit the creativity here?

1 Like