Wizard and stepper

Step transition

Calm motion between steps: the incoming pane fades in and settles 8px in the direction of travel on the sheet timing. Instant under reduced motion.

Live specimen

Lifted from the approved family page at build time; interact with it.

Moving between steps

Try it. Next shows a short busy label while it checks, then the new step fades in and settles 8px from the side you are heading to; Back reverses it. Reduced motion makes it instant.

Navy birdseye two-piece suitHS 81045 · Crystal Springs
Recommended£1,150
Sold asVisit us to be measuredAdd your measurements
As designed
£
£
Jacket only
£
£
Navy birdseye two-piece suitHS 81045 · Crystal Springs
Recommended£1,150
As designed
£1,150.00 · £1,190.00Visit us · Add your measurements
Jacket only
£820.00 · £850.00Visit us · Add your measurements
Website
Not placed yetYou can add it to sections after saving
Not saved yet
Uses.wz-stage.wz-pane@keyframes wz-fwd--motion-sheet-in--toast-shift.wz-pk[aria-pressed]

from families/wizard-stepper/#transition