Examples

Action-driven playback

Autoplay is off by default, so the card only moves when asked to. The buttons are Action components targeting the Motion instance with the arrow syntax, the hover pattern combines play() and reverse() for a symmetric in/out animation, and the last button runs a one-off spin with animate() — clicking Play afterwards returns to the animation declared by the options.

Full playback control

Every playback method on one animation: play(), pause(), reverse(), stop(), cancel() and complete(), plus a range input scrubbing through the animation with seek(). Stop commits the styles the element reached, while cancel reverts it to its pre-animation styles.

Reacting to events with DataBind

The motion-* events bubble, so a single routing Action on an ancestor catches all five of them and forwards a label to a DataBind in a separate subtree — the status text never shares an element with the animation.

Gestures

The hover, press and inView options apply keyframes while their state holds, through Motion's own gesture functions: hover filters out touch emulation, press responds to pointer and keyboard alike, and in-view uses a real IntersectionObserver. When the state ends, a new animation plays forward to the base values of the properties the gesture touched — the base values are read from the element itself, so there is nothing to declare.

Spring entrance and exit for a Dialog

The Dialog component handles the top layer, focus and scroll lock, and its lifecycle events are extendable: registering a promise with event.detail.waitUntil() makes the dialog wait for it. The open event plays a spring entrance on the Motion box, the close event plays it in reverse, and the dialog stays painted until the exit settles — physics a CSS transition cannot express. Every closing interaction (button, backdrop, Esc) just calls Dialog.close().

Scrubbing with TimerProgress

A single element carries Action, Motion and TimerProgress: the timer emits a 0 → 1 ratio on every frame, and the co-located Action hands it to Motion.seek(). The effect folds the ratio into a 0 → 1 → 0 triangle wave (1 - Math.abs(2 * ratio - 1)), so one timer cycle yoyos the animation out and back — a looping, pausable, restartable timeline without a line of custom JavaScript. For a plain forward loop, pass the ratio through unchanged; Motion can also yoyo on its own with data-option-transition='{ "repeat": 10, "repeatType": "reverse" }', without any timer.