Page Transition Fade
The outgoing view sinks a few pixels as it fades while the incoming one rises to meet it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import type { ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Page Transition Fade
*
* A route change with a direction: the outgoing view drops a few pixelsAbout this pattern
A route change with a direction. The leaving view drops three to nine pixels as its opacity goes, the arriving view starts the same distance below its resting place and lifts into it, and the two overlap rather than taking turns — a fade-out-then-fade-in leaves an empty frame in the middle, which is the moment that makes an app feel slow. Both views live in one grid cell, so the frame is sized by the taller of them while they cross and can never collapse and shove the rest of the page. Travel is single-digit pixels on a spring above critical damping: chrome should be felt, not watched.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Opening a different page settles the body content in without a blank frame between.
Related patterns
- Image Blur UpA tiny blurred stand-in holds the frame and sharpens into the full picture, with nothing below it moving.
- Carousel Preload SlideThe upcoming frame resolves from placeholder to artwork a beat before the track moves to it.
- Headline Word RiseEach word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.