@gggiiia: i found a solution for ionic5.

include this in app.module.ts:

IonicModule.forRoot({ 
  navAnimation: fixAnimation
}),

and this in a new file:

import { Animation, NavOptions, createAnimation } from '@ionic/core';

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';

export function fixAnimation(_: HTMLElement, navEl: TransitionOptions): Animation {
	
	let transitionElement: any = navEl;

    const enteringEl = transitionElement.enteringEl;
    const leavingEl = transitionElement.leavingEl;

	const backDirection = (transitionElement.direction === 'back');
	const rootTransition: Animation = createAnimation('')
	if(!backDirection) {

		const squareA: Animation = createAnimation('')
			.addElement(enteringEl)
			.duration(transitionElement.duration || DURATION)
			.easing(EASING)
			.beforeStyles({ 'opacity': 1 })
            .fromTo('transform', 'translateX(99.5%)', 'translateX(0%)');

		const squareB: Animation = createAnimation('')
			.addElement(leavingEl)
			.duration(transitionElement.duration || DURATION)
			.easing(EASING)
            .fromTo('transform', 'translateX(0%)', 'translateX(-20%)')
			.fromTo('opacity', '1', '0.8')

		rootTransition.addAnimation([squareA, squareB]);
	}
	else {

		const squareA: Animation = createAnimation('')
			.addElement(leavingEl)
			.duration(transitionElement.duration || DURATION)
			.easing(transitionElement.easing || EASING)
            .fromTo('transform', 'translateX(0%)', 'translateX(99.5%)');


		const squareB: Animation = createAnimation('')
			.addElement(enteringEl)
			.duration(transitionElement.duration || DURATION)
			.easing(transitionElement.easing || EASING)
			.fromTo('opacity', '0.8', '1')
            .fromTo('transform', 'translateX(-20%)', 'translateX(0%)');

		rootTransition.addAnimation([squareA, squareB]);

	}

    return rootTransition;

};

export interface TransitionOptions extends NavOptions {
  progressCallback?: ((ani: Animation | undefined) => void);
  baseEl: any;
  enteringEl: HTMLElement;
  leavingEl: HTMLElement | undefined;
}

export const getIonPageElement = (element: HTMLElement) => {
  if (element.classList.contains('ion-page')) {
    return element;
  }

  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
  if (ionPage) {
    return ionPage;
  }
  // idk, return the original element so at least something animates and we don't have a null pointer
  return element;
};

@lincolnthree Check out https://gist.github.com/benmarsh/6401a4c58a4b48e305c217c6552c182e for the simplified version of the transition. It’s based on the included Ionic transition and I’ve left in the commented out code so you can see what has been removed. I’ve not had any animation problems with using this reduced down version. Add { navAnimation: simpleTransitionAnimation } to the app config to override the default (https://ionicframework.com/docs/utilities/config)

any news on this?, i’m having the same problem with animations. i tried to implement the suggested new animation but got a bunch of errors, and after trying to fix them no animation at all, i’m using ionic/angular 5.0.4

@tobiasbambullis workaround fixes navigating from/to tabs, but doesn’t fix the problem with navigating between tabs. @brandyscarney It would be really great if the ionic team could fix this issue, and get the animations to look native for each platform. Both used to work in ionic 2/3.

Same here, none of the above solutions worked for me.

Yes! Thanks, sorry I forgot to include that.

@benmarsh Oh…my…god.

You are a life-saver. This has been a thorn in my side for months. It’s interesting to me that the transition basically works, but that something in the default causes it to break.

If I’m reading this correctly, it looks like most of what was removed has to do with animating the toolbars and titles. Curious. I may try to dig in to this when I can get a chance.

For now… THANK YOU!

Now to figure out how to only apply this when on iOS 😃