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 js-toolkit: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 listens for the dialog's extendable open/close events by itself, with no wiring attribute at all. Two instances share it here, the backdrop fading and the box springing in, because the extension is additive: every registration on the event is awaited, so any number of them can animate one host without ever knowing about each other. The exit plays in full — the dialog stays painted until both have settled.