# Motion

Open `index.html`. Choose A or B, adjust **Duration** and **Easing**, then **Replay**. Each setting keeps its own values so you can compare the same movement. No install or build step is needed.

## Try it

- Compare **Cubic out** and **Cubic in** at 420 ms. Notice when the movement becomes visible.
- Choose **Spring physics** to reveal stiffness, damping and mass. Duration becomes the calculated settling time. **Custom Bézier** and **Steps** reveal their own controls.
- Open **Curve & playback** for the graph, endpoints, scrubbing, delay, playback speed and CSS. Start a longer move, then choose the opposite endpoint before it finishes.
- Turn on **Remove motion** during playback. The destination stays selected and movement stops. Your system's reduced-motion preference also takes effect immediately.

There are 34 easing choices: linear; sine, quad, cubic, quart, quint, expo, circ, back, elastic and bounce in three directions; plus custom Bézier, steps and spring.

**Motion tips & implementation** contains guidance on timing, interruption and accessibility.

## Reuse it

- `motion.js`: curve math, sampled springs and CSS easing values.
- `app.js`: playback, interruption, controls and local settings.

In **Curve & playback**, **Copy** exports the selected timing and reduced-motion rule. Playback speed only changes the preview. Most curves and springs export sampled `linear()` values; custom Bézier and steps use their native CSS functions.

The CSS supplies timing. For an interaction that can reverse, also adapt the current-position retargeting in `app.js`. The sampled spring starts with zero velocity; a gesture spring should preserve velocity when retargeted. A preview that has not settled stops at ten seconds and reports the limit.

The sample includes [Interruptible interactions](../../skills/design-engineering/interruptible-interactions/SKILL.md). The full library also includes Purposeful motion and Microinteraction feedback. The gallery's **Use in your project** action captures your settings and the available skill paths in an editable brief.

## Check your adaptation

Reverse repeatedly and confirm the latest destination wins. Use Enter or Space on an endpoint button, or page arrow keys outside controls, to check immediate keyboard selection. A/B and Replay use the selected timing unless motion is removed.

Also check resizing, a changed system motion preference and blocked storage. Invalid saves fall back to defaults; unavailable storage leaves the controls usable for the session. Settings belong to this browser and origin, with no merging across tabs.

The preview uses the Web Animations API and falls back to immediate movement when animation is unavailable. Exported sampled curves need CSS `linear()` support. See [CSS easing functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function).