Smooth page transition across app pages

[masakudamatsu]

TODO: Implement it in the 404 page

Design Duration: Entering 300ms / Leaving 250ms

• Animation involves the whole screen, requiring a long duration
• Entering animation should be longer than exiting, to stress the incoming element.
• See https://material.io/design/motion/speed.html#duration
• If a transition feels too fast or slow, adjust its duration in 25ms increments until it strikes the right balance. (Jonas Naimark of Google Design 2018)

Easing: Outgoing cubic-bezier(0.4, 0.0, 1, 1); (accelerated) / Incoming cubic-bezier(0.0, 0.0, 0.2, 1); (decelerated)

• For outgoing page, the beginning of animation needs to be slow to be emphasized, to let the user notice they are leaving the page.
• For incoming page, the end of animation needs to be slow to be stressed, to let the user pay attention to the new page's apearing.
• See https://material.io/design/motion/speed.html#easing

fade-through as choreography

• Each page is a sibling. Any overlapping animation (fade or cross-fade) would give a wrong impression about the page hierarchy.
• Velocity is the highest when the outgoing page finally disappears and the incoming page first appears.

  (image source: https://material.io/design/motion/choreography.html#sequencing)

Outgoing elements fade out

• Delay: 0 ms
• Duration: 90 ms
• Easing: 40% Outgoing Only

Incoming elements fade in

• Delay: 90 ms
• Duration: 210 ms
• Easing: 80% Incoming

Implementation

Following Nicolas Girault's article...

• Use the location prop for the Switch component to choose which Route to render. To access location prop, use the render prop of the Route component, as in Girault's demo (which isn't mentioned in the article, though).
• Wrap the Switch component with <div>. See Annex A of the article.
• Install React-Transition-Group and wrap the Switch component with TransitionGroup and CSSTransition like so:

  <TransitionGroup>
  <CSSTransition key={location.key} classNames="fade" timeout={300}>
  <div>
    <Switch>
      ...
    </Switch>
  </div>
  </CSSTransition>
  </TransitionGroup>

• The above code, however, does not animate the existing route. So replace it with:

  <TransitionGroup childFactory={child => React.cloneElement(child, {classNames: 'fade', timeout: 300})}>
  <CSSTransition key={location.key}>
   <div>
    <Switch>
      ...
    </Switch>
  </div>
  </CSSTransition>
  </TransitionGroup>

• Define the animation in a CSS module as something like:

  .fade-enter {
  opacity: 0;
  transform: scale(1.1);
  }
  .fade-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
  }
  .fade-exit {
  opacity: 1;
  transform: scale(1);
  }
  .fade-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
  }

[masakudamatsu]

We need to implement the smooth page transition in the 404 page.

[masakudamatsu]

Actually, we don't need to animate page transition from the 404 page to the landing page.

• The user does not need to learn the relative location of the 404 page within our web app.