Animate with Moto

Keyframes, springs, and timelines you can ship.

4 min readUpdated Sep 12, 2026

Moto animates anything on a real timeline.

Timeline

Add keyframes, set easing, and scrub to check timing. Springs feel physical without hand-tuned curves.

Ship it

Moto timelines run with the @varial/moto runtime, built on native browser animation.

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

const tl = createTimeline()
tl.add(card, [
  { opacity: 0, transform: 'translateY(24px)' },
  { opacity: 1, transform: 'none' },
], { duration: 600, easing: 'ease-out', fill: 'both' }, 0)
tl.play()