fade

Fade uses a fade-through sequence: the outgoing page fades first, then the incoming page appears.

Top-level — Switching tabs or root sections.

When this motion fits

When to use: Use it for calm switches between unrelated screens or top-level destinations.
What moves: The old page fades out before the new page fades in, so the surfaces do not compete.
Avoid when: Avoid it when hierarchy, order, or travel direction should remain visible.

Add it to a route rule

fade() sets the motion; the rule around it decides which navigations get it. The config shape is the same in every framework.

import { fade } from "@ssgoi/react/view-transitions";

const config = {
  transitions: [
    { priority: -100, on: "/**", transition: fade() },
  ],
};

Pattern forms, priority and the scroll defaults that come with each rule shape are on Route rules.

Behavior

fade-through
default
A single neutral behavior with no directional cue. It is sequential, not a symmetric cross-fade.
```
fade()
```
Open live demoOpens at the source screen

Agent guide: /llms/transitions/fade.txt — every prop, the required markup, and a config fragment as plain text.

Read next