Motion One

Tiny size.
Huge performance.

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

npm install motion
Quick startPlay

Shockingly simple.

Motion One packs the power of the Web Animations API into a minimal API.

It adds new features like selectors, individual transforms, timeline sequencing and more.

animate("#ball", { scale: 1.3 })
Quick start

Size matters.

Motion One's animate function is just 3.8kb, and scroll is only 2.5kb.

Both less than 20% the size of their Greensock equivalents.

Compare features
3.8
Motion One
23
Greensock

Max performance.

Motion One uses hardware accelerated animations where possible.

So your UI stays snappy and responsive, even under heavy workloads.

Performance guide

Accelerated animations

Normal (simulated)

Best in dev.

Motion DevTools is a Chrome extension for inspecting, editing and exporting animations made with Motion One or CSS.

See DevTools

Sponsors

‹div›RIOTS

And more...

  • Keyframes

    Simple array syntax for quick animation sequencing.

  • Timeline

    Create intricate animations across multiple elements.

  • Springs

    Velocity-based springs for naturalistic animation.

  • Production-ready

    Written in TypeScript, with full test coverage.

  • Nice Vue

    Simple API for Vue and Solid, with more UI libraries on the way.

  • Animate anything

    Custom functions can animate Three.js, canvas, innerHTML and more.

  • Free for all

    Published under MIT. No annual commercial license to worry about.

  • Old dog, new tricks

    Created by the author of Framer Motion, Pose, and Popmotion.

Get started with Motion One's interactive quick start guide.

Quick startPlay