Motion

A modern animation library for JavaScript and React

npm install motion

Motion makes animation

simple, fun, and limitless.

Go beyond the browser with super smooth

springs, layout animations, timelines

and much, much more.

  • Free

    Completely free to use and open-source under the MIT license.

  • Tiny

    Mini animate is 90% smaller than its GSAP equivalent, scroll 75% smaller.

  • Production-ready

    Written in TypeScript, with extensive test coverage.

  • Hybrid engine

    The power of JS animations with the performance of hardware acceleration.

  • Motion's pick-up-and-play API is easy to start and fun to master.

    Examples:

    JS

  • Animate every transform axis independently, without needing multiple elements.

    Examples:

    JS

  • Go beyond time-based animations with real spring physics for great-feeling animations.

    Examples:

    JS

  • Motion uses browser APIs for hardware accelerated scroll-linked and scroll-triggered animations.

    Examples:

    JS

  • Motion for React makes it easier than ever to animate elements as they exit the DOM.

    Examples:

  • Animate between different layouts with Motion's industry-leading layout animation engine.

    Examples:

    JS

  • Hover, press and drag gestures that feel native, not “webby”

    Examples:

  • Variants, stagger and timelines make it easy to precisely orchestrate animations.

    Examples:

    JS

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

// JavaScript
animate(".ball", { scale: 1.2 })

// React
<motion.div animate={{ scale: 1.2 }} />

Our Sponsors

Motion is made possible thanks to our amazing sponsors.

Courses

Motion for React has video and interactive courses built by the best educators in the world.

Premium Components

Cursor is the first of a series of creative React components that make it quick to level up your Motion.

All components are built in TypeScript and supported by a strong test suite. Exclusive for Motion+ members.

?

Showcase

All the beautiful sites featured in the Framer gallery are powered by Motion.

Here are some more amazing interactions made by developers with its flexible APIs.

Delight the web with Motion