Page Transition Easing for Single-Page Applications

Page Transition Easing

Page transitions in single-page applications (SPAs) need careful easing to feel natural. The outgoing page should leave quickly, and the incoming page should enter smoothly.

Recommended Approach: Asymmetric Timing

Use different easings for the exiting and entering pages:

/* Exiting page — accelerate away */
.page-exit {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1),
              opacity 200ms cubic-bezier(0.4, 0, 1, 1);
}
.page-exit-active {
  transform: translateX(-30px);
  opacity: 0;
}

/* Entering page — decelerate into position */
.page-enter {
  opacity: 0;
  transform: translateX(30px);
}
.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: transform 350ms cubic-bezier(0, 0, 0.2, 1),
              opacity 350ms cubic-bezier(0, 0, 0.2, 1);
}

Why Asymmetric?

1. Exit (200ms, accelerate): The old content should leave quickly. Users have already decided to navigate; showing them the old page lingering feels sluggish. The accelerating curve makes the page appear to "speed away."
2. Enter (350ms, decelerate): The new content is what the user wants to see. It should arrive with a sense of presence, settling gently into its final position.

Duration Guidelines for Page Transitions

Transition type	Exit duration	Enter duration
Same-level navigation	200ms	300ms
Drill-down (parent→child)	150ms	350ms
Back navigation	200ms	250ms
Modal open	–	300ms

Code Example with React Transition Group

.fade-enter {
  opacity: 0;
  transform: scale(0.98);
}
.fade-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
}
.fade-exit-active {
  opacity: 0;
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
}