Motion

Pick a Preset and press Play. Distance drives the slide, bounce and shake presets; Scale, Pulse and Spring ignore it. Starting an animation cancels any animation already running on the same wrapper, so rapid clicks never stack up.

Prerendered content is visible by default, so an entrance animation is opt-in: set AnimateOnFirstRender and it plays once the component becomes interactive. Increasing Delay per item gives the staggered list effect — the first keyframe is held during the delay, so nothing flashes.

Changing Visible plays the entrance frames, or the same frames reversed followed by hiding. The content is never unmounted — it gets hidden, inert and aria-hidden — so type into the box, hide it, and bring it back to see the draft survive.

Hover fires on pointer enter and when keyboard focus moves into the wrapper, so Tab works as well as a mouse. Press covers a primary-button pointer down and an Enter or Space keydown, and the key still reaches the child — the button underneath still activates.

InView watches the element with an IntersectionObserver. Threshold sets how much of it has to be on screen, and Once decides whether it plays only the first time. Scroll the panel below — with Once="false" each card animates every time it comes back into view.

Capture the component with @ref and call PlayAsync() to animate on your own terms — a shake on a failed validation, for example. Leave the field empty and press Continue. It is safe to call from any thread and does nothing while Visible is false.

A non-empty Keyframes list replaces Preset and is passed straight to element.animate(). Use Web Animations property names — opacity, transform, camelCase for multi-word properties — plus the optional offset key.