Onboarding Step Transition
The next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Onboarding Step Transition
*
* The next panel slides in from the right while the current one leaves
* to the left, and the progress bar advances underneath them.About this pattern
Paging through a setup flow, where the direction of travel is the message: forward sends the old panel left and brings the new one in from the right, back reverses both. The progress bar advances at the same time, so the user always knows how much is left without reading a counter. The card height is fixed and the panels are absolutely positioned, because a frame that resizes mid-slide fights the horizontal movement. Panels are mostly text, so they translate and fade only — never scale, never rebound.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Setup questions paged horizontally with a progress indicator above.
Related patterns
- Setup CompleteThe last item checks itself off, the checklist clears, and a single confirmation takes its place.
- Name Your WorkspaceTyping a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.
- Persona SelectPicking a role lifts that card while the others step back, and a line below says what the answer changed.