Examples

Animated state change

MotionView wraps DOM updates in Motion's animateView(), as a drop-in alternative to ViewTransition: toggling swaps the enterTo/leaveTo classes inside a view transition, and the spring transition with the layout morph animates the card between its two states — no ::view-transition-* CSS needed. Where view transitions are unavailable, the classes still swap, only without animation.

Zero-wiring exit animation for data-bind:if

Ambient wiring in action: the MotionView has no wiring attribute at all — it wraps the dom-update event that data-bind:if announces before changing the DOM, so the template content animates in and out, even though the removed nodes are already gone when the exit plays. The layout option morphs the container's size with a spring. Because the event bubbles, the MotionView only needs to sit just outside the <template> instead of around the whole widget: the morph then hugs the panel region alone and leaves the checkbox above it out of the transition.

Ambient view transitions in a Dialog

The same containment story with Dialog: nested inside it, a MotionView joins the bubbling open/close lifecycle by itself — the dialog calls its enter()/leave() through waitUntil() and stays painted until the view transition settles. Two instances share the same lifecycle here, the backdrop fading and the box springing in, because waitUntil() is additive: every transitioner that registers on the event is awaited, so any number of them can animate one dialog without ever knowing about each other. Compare with the explicit Motion wiring: same result, zero attributes.