A directional wizard with animated height, slide transitions, and progress dots.
A step wizard guides users through a sequence with directional navigation. Content slides left or right depending on direction, the container height animates to fit each step, and progress dots glide between positions.
A direction value (1 or -1) is set whenever you navigate, then passed into slide variants as a custom prop. AnimatePresence uses it to decide whether the incoming panel enters from the right or left.
The height is driven by useMeasure and animated with a spring, so the container smoothly resizes when content length changes between steps. Progress dots use layoutId="step-dot" so the active indicator glides between them.
The mode="popLayout" on AnimatePresence removes the exiting element from layout immediately, so the entering element doesn't wait for the exit animation to finish. This keeps transitions feeling snappy.
Set up your email and a secure password to get started.
Loading...
Tune the step count and spring physics.
Set up your email and a secure password to get started.
Loading...