Multi-Step Form

What's Included

• index.html: the demo page and copy-ready semantic form markup

• assets/style.css: component styles with the light and dark token sets

• assets/script.js: readable GSAP core source with native validation and cleanup

• assets/script.min.js: minified production script

• thumbnail.html: build-only capture frame

• Directional panel transitions use a short x/y/rotation exit and a back.out spring settle

• Every field in a step is validated with the browser's own constraint API before the panel moves

• Completed answers join into one line in the trail as each step advances, and unwind on Back

• The submit button morphs to a checked Confirmed state before the receipt values stagger in

• role="status", aria-current and aria-invalid keep state changes announced

Quick Start

1. Add to your <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Copy the form with id="springStepForm" from index.html into your page. Keep one [data-panel] fieldset per step with as many real controls in it as the step needs, and one matching [data-summary] item per step if you want the answer trail. Steps are read from the DOM, so adding or removing a [data-panel] fieldset (with its [data-progress] marker and [data-summary] row) is all a fifth or a third step takes; the step count in the header updates itself.

The demo furniture is not part of what you bought: the toolbar strip, the .stage ground and the Fill demo / Restart buttons in index.html are there to show the component off. Delete them and mount the .step-form element on its own.

Hooks the script owns: [data-step-form], [data-panel], [data-progress], [data-summary], [data-form-count], [data-action="next"], [data-action="back"], [data-submit], [data-submit-label], [data-submit-success], [data-success-state], [data-confirm="<field name>"] and the role="status" line.

Themes

Two themes, one design: light (the default) and dark. Set the attribute on the element the component lives in, or on <body>:

Code snippet omitted: it ships with the download.

Nothing else changes: same markup, same script, and no theme name is ever read in JavaScript. The demo's toggle and the ?variant=dark URL parameter only set that attribute and request a resize pass.

Both blocks in assets/style.css declare the same list, so re-valuing one block is the whole of a rebrand:

• Ground and surfaces: --ground, --ground-2, --raised, --hover, --marker-bg, --field-bg
• Text: --ink, --ink-2, --ink-3
• Lines: --line, --line-strong, --field-border, --track
• Accent (the step in play, the primary button, the focus ring, the trail marker): --accent, --accent-ink, --accent-text, --accent-wash, --accent-press, --focus-ring
• Status: --success, --success-ink, --success-wash, --danger
• Shape and type: --radius, --radius-sm, --radius-xs, --shadow, --font

Swap --accent and its four companions for your own brand colour and the component is on your palette; check the text on the accent still clears 4.5:1 and re-value --accent-ink if it does not.

Keyboard & Accessibility

• Each step is a semantic <fieldset> with a real <legend>, and every control has a <label> and native validation attributes.
• The ordered progress list marks the active step with aria-current="step".
• The first invalid control in a step receives aria-invalid="true" and focus; the browser's reportValidity() message remains available.
• Focus moves to the first control of the incoming panel once its transition finishes.
• The form status is a polite role="status" live region, announcing step changes and the final confirmation.
• prefers-reduced-motion keeps every panel, answer and success state visible while reducing GSAP durations to zero. Back, Next and Submit still work.
• Escape intentionally has no destructive action: values stay in the fields, and the form has no modal focus trap to close.

How It Works

Panel glide and answer trail. Each Next action checks every control in the current step with the native constraint API, joins their values into the matching trail item, then runs a GSAP timeline. The outgoing fieldset slides a little in the travel direction while the next one arrives from the opposite side and settles with back.out; Back reverses the same geometry and removes the trail item it had written. Only the active fieldset is visually and interactively present when JavaScript is running.

Confirmation transform. A valid submit first swaps the button label and tweens its width into the checked state. The form then replaces the last fieldset with the receipt and staggers its submitted values into place. Resetting the form kills the component's tweens, clears state attributes and returns to step one, so a second run does not inherit a stale transform.

window.demoComplete() runs the whole flow with sample answers and window.resetStepForm() returns it to step one; both exist for the demo toolbar and can go with it.

Customisation

• The panel area has a fixed height (.has-js .step-panels) so the card does not jump between steps; raise it if your steps carry more fields.
• Group fields with .field-set, and put two short fields side by side with .field-row.
• Change the spring character in assets/script.js at the back.out eases and the .68 second incoming-panel duration.
• Keep .step-panels and .form-main positioned as the animation layers when reskinning. The active panel is position: absolute under .has-js, while no-JS leaves all fieldsets in normal flow.
• Do not add a CSS transform to [data-panel], [data-summary], [data-confirm] or [data-submit]; GSAP owns their x, y, rotation, opacity and width.
• Colours, radii, shadows and fonts live in the two theme blocks in assets/style.css.

Requirements

• GSAP 3.12+ (core only)
• No build step, no framework