Moto runtime

Play and scrub timelines in your own code.

3 min readUpdated Sep 12, 2026

Stagger a list

ts
import { createTimeline } from '@varial/moto/runtime'

const cards = [...document.querySelectorAll('.card')]
const tl = createTimeline()

tl.stagger(cards, [
  { opacity: 0, transform: 'translateY(24px)' },
  { opacity: 1, transform: 'none' },
], { duration: 600, easing: 'ease-out', fill: 'both' }, 80)

tl.play()

Tie it to scroll

Build the timeline, then call seek with a time based on scroll position.