Spring Step Form
A three-step form where each completed answer compresses into a summary rail and the final submit button springs into a confirmation state.
About This Component
A polished three-step form for onboarding, lead capture and checkout flows. The active field group glides forward with a spring settle, while each completed answer compresses into a slim summary rail so the journey stays legible without feeling heavy. On the final submit, the button morphs into a checked confirmation and the submitted brief settles into a staggered receipt.
Read the full effect overview
The component is built on semantic form controls with real labels, native validation and a small keyboard model that keeps Enter useful without stealing textarea line breaks. Ships in three materially different looks—ink, paper and signal—through one CSS data-variant attribute and uses GSAP core only.
What's Included
- Three semantic fieldsets with required native inputs and labels
- Spring-like panel transitions with a small directional overshoot
- Completed answers compress into a compact animated summary rail
- Progress markers update with an active and completed state
- Submit button morphs into a checked success state before the receipt settles
- Staggered confirmation values and an aria-live status message
- Back, Next and Submit reset cleanly for replay and demo testing
- Three CSS-driven variants: ink, paper and signal
Perfect For
- Onboarding flows that ask for a small amount of context
- Lead capture forms that keep the conversation focused
- Checkout or project-intake forms with a reassuring final receipt
- Multi-step product questionnaires that need a compact review trail
How It Works
Panel glide and summary rail
The script keeps one fieldset active at a time, validates it with the browser's native constraint API, then uses a GSAP timeline to send the old panel a short y and rotation exit while the next panel arrives from the opposite side. The completed value is written into the summary rail before the incoming panel settles with back.out easing.
Confirmation transform
A valid submit first changes the button label and animates its width to the checked state, then the current panel gives way to the confirmation receipt. The receipt values use a staggered y and opacity settle, while all success colours remain in the active variant's CSS custom properties.
