@studiometa/ui

Appearance

MotionScrollTimeline JS ​

The MotionScrollTimeline component is the scroll driver for a group of animations: the element's traversal of the viewport defines the timeline, and every Motion child it contains is bound to that progress with Motion's scroll() — hardware-accelerated where the browser supports ScrollTimeline.

The children declare their keyframes as usual (arrays give multi-step tracks) and keep their whole playback surface; leave their autoplay off (its default) so they do not play before the scroll link takes over. Registering the timeline is enough: it mounts its Motion children itself.

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

Usage ​

html
<section
  data-component="MotionScrollTimeline"
  class="h-[300vh]">
  <div
    data-component="Motion"
    data-option-animate='{ "opacity": [0, 1, 0], "y": [80, 0, -80] }'>
    …
  </div>
</section>

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