MotionSequence JS

The MotionSequence component orchestrates its Motion children as one animation sequence: each child declares its keyframes as usual, and the sequence composes them — in DOM order — into a single timeline with Motion's sequencing.

The whole playback surface applies to the sequence: an Action can play(), reverse() or seek() the entire choreography, and a MotionScrollTimeline can scrub it. The sequence owns the children's playback — leave their autoplay off (its default) and enable it on the sequence itself with data-option-autoplay to play on mount.

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

Usage

<ul data-component="MotionSequence" data-option-stagger="0.1" data-option-autoplay>
  <li data-component="Motion" data-option-initial='{ "opacity": 0, "y": 16 }' data-option-animate='{ "opacity": 1, "y": 0 }'>One</li>
  <li data-component="Motion" data-option-initial='{ "opacity": 0, "y": 16 }' data-option-animate='{ "opacity": 1, "y": 0 }'>Two</li>
</ul>

See the examples for a live demo, and the JavaScript API for the full list of options.