@studiometa/ui

Appearance

MotionView JS ​

The MotionView component wraps DOM updates in Motion's animateView() so the change plays as a view transition. It is a drop-in alternative to the ViewTransition component — same enter()/leave()/toggle() methods, state property, events and viewTransitionName/enterTo/leaveTo options — but the animation is declared with Motion keyframes and transitions (including springs) instead of the ::view-transition-* CSS pseudo-elements.

Containment is the wiring: with the auto option (on by default), a mounted MotionView wraps any dom-update announced inside its subtree — by Fetch or DataBind's data-bind:if — and joins the lifecycle of a containing Dialog, with zero wiring attributes on either side. See ambient wiring.

MotionView is part of @studiometa/ui-motion, alongside Motion, MotionScrollTimeline and MotionSequence.

Usage ​

Option values are parsed as JSON, so object keys must be quoted:

html
<div
  data-component="MotionView"
  data-option-enter-to="is-open"
  data-option-transition='{ "type": "spring", "bounce": 0.3 }'>
  …
</div>

<button data-component="Action" data-on:click="MotionView->target.toggle()">Toggle</button>

See the examples for live demos of the ambient integrations, and the JavaScript API for the full list of options, methods and events.