Save and Continue
The button confirms the save on itself, then the finished section folds and the next opens.
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 { useLayoutEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Save and Continue
*
* The commit step of a sectioned form. The button confirms the save on
* itself first — a fill running across it and the label handing over —About this pattern
The commit moment in a sectioned form, staged as two events rather than one. A fill runs across the button from its leading edge and the label hands over to a confirmation — the button reports the save — and only after that does the completed section fold down to a summary line while the following one opens and its fields arrive a beat apart. Folding never hides the answer: the first value stays on the header line with an edit control beside it. Heights are eased, not sprung; a section that overshoots pushes the whole page down and pulls it back.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Completed sections collapse to a summary row with the next part opening below.
Related patterns
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.
- Checkout Step ProgressThe finished stage folds into a one-line recap while the following one opens and the rail fills.
- Color Picker SwatchA ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.