Ionic React - IonRouterOutlet - Animation Builder

Ionic Framework Ionic React
1

Has anyone here tried to override the animation for navigation? Docs about AnimationBuilder was pretty vague i dont know where to look at, Main issue was the double rendering of IonPage for every route, since it cannot be avoided without replacing it with Switch, Im planning to override the animation so it wont look as bad as it is now HELPPP

2

We have an entire documentation page dedicated to custom animations in Ionic: https://ionicframework.com/docs/utilities/animations

In particular, you should look at the Overriding Ionic Component Animations section.

3

Hey thanks! but i was trying to pass an AnimateBuilder type in ionrouteroutlet and i think its different from the ones in overriding ionic component animation is it not?

4

Nope, it’s the same thing.

5

We probably need a better explanation of this on the docs, but all an AnimationBuilder is is a function that returns an Ionic Animation instance.

6

Ohhhh ok got it, thanks mate! What i did to get the animation i want was to enforce android mode lol

7

Hey jemantilla,
I’m looking to do the same thing in Ionic 5 React, but having issues getting it to work. Got any sample code of how to add a custom page transition/animation?

8

Nothing mate, Just did a work around to hide the page until the double rendering is done and all thats left to see is the last render.

 ionViewDidEnter = () => {
    setTimeout(() => {
      this.setState({ safeToView: true });
    });
  };

<IonPage
          className={`worker-sign-in-page ${safeToView ? "safe-to-view" : ""}`}
></IonPage>

.worker-sign-in-page {
  visibility: hidden;

  &.safe-to-view {
    visibility: visible;
    opacity: 1 !important;
  }
}
9

Hi folks. Nearly a year late to the party :grimacing: since this was 1st posted. Anyway, what worked for me was a modified for React version of the pageTransition script from here: Customizing Page Transitions in Ionic 5 | Damir's Corner

And then calling it using setupConfig like this:

setupConfig({
  navAnimation: pageTransition
});