Forty transitions between pages
Forty smooth page transitions for React: fade, shared axis, slide, cover, sheet, cube, carousel, flip, circle reveal and more — PageTransition for routes and steps, the same presets on View Transitions, light variants for machines without a GPU. Ten presets are free in valyro-ui, thirty more in Pro.
Calm
- Fade (
fade) — A plain cross-fade: tabs, filters, anything without a direction - Fade through (
fade-through) — Out, then in with a slight zoom: unrelated sections - Shared axis X (
shared-x) — A short sideways shift: steps of a flow, next and previous - Shared axis Y (
shared-y) — A short vertical shift: feeds and lists of pages - Shared axis Z (
shared-z) — In and out in depth: from a list into its details - Blur (
blur, Pro) — Through a soft blur: media, galleries, onboarding - Rise (
rise) — The new page rises a little as the old one fades: a safe default for most apps - Dip (
dip, Pro) — Out to the background and back in, like a dip to black: chapters, modes
Spatial
- Slide (
slide) — Both pages travel a full width: carousels and pagers - Slide up (
slide-up) — A full page up or down: stories, vertical pagers - Cover (
cover) — The new page slides over the old one, as in iOS navigation - Uncover (
uncover, Pro) — The old page slides off and shows the new one under it - Sheet (
sheet) — Rises over the old page, which steps back: modal screens - Zoom (
zoom, Pro) — Through the old page into the new one: dashboards, maps - Pop (
pop, Pro) — Springs in with a small bounce: playful apps, success screens - Scale down (
scale-down, Pro) — Slides over the old page, which shrinks away: drill-downs - Drop (
drop, Pro) — Falls in from above and lands with a bounce: notices, celebrations - Elastic (
elastic, Pro) — A full slide on a spring: swipeable screens, galleries - Skew (
skew, Pro) — Slides in leaning, then straightens: energetic brands, promos - Swirl (
swirl, Pro) — Turns and grows into place: playful reveals, games - Arc (
arc, Pro) — Both pages ride the rim of a wheel: dials, step-by-step setup - Fall (
fall, Pro) — The old page tips off its corner and falls away: dismissing, deleting - Newspaper (
newspaper, Pro) — Spins out, the next one spins in: breaking news, retro
3D
- Flip (
flip, Pro) — Turns over like a card: front and back, sign in and sign up - Flip X (
flip-x, Pro) — Turns over top to bottom: cards, the answer to a question - Cube (
cube, Pro) — Rotates like the faces of a cube: onboarding, sections - Cube Y (
cube-y, Pro) — The faces of a cube turning up: vertical feeds, levels - Swing (
swing, Pro) — Swings in on a hinge like a door: menus, side screens - Tilt (
tilt, Pro) — The old page tips back, the new one rises: landing sections - Carousel (
carousel, Pro) — Pages on a turning wheel: galleries, product showcases - Room (
room, Pro) — The walls of a room turning around you: tours, spaces - Doors (
doors, Pro) — Swings out on one hinge, the next swings in on the other: menus, settings - Depth slide (
depth-slide, Pro) — Both pages step back, slide across and step forward: dashboards, workspaces
Reveals
- Circle (
circle, Pro) — Grows from the click: theme switches, a call to action - Wipe (
wipe, Pro) — A straight edge sweeps across: before and after, timelines - Wipe up (
wipe-up, Pro) — An edge sweeps up from the bottom: results, scores - Split (
split, Pro) — Opens from the middle like doors: big reveals, launches - Shutter (
shutter, Pro) — Opens from the middle, up and down: covers, hero screens - Diagonal (
diagonal, Pro) — A slanted edge sweeps across: sport, editorials - Diamond (
diamond, Pro) — A diamond opens from the middle: launches, unlocks