MOTION

MOTION

MOTION

MOTION

A modern animation library for JavaScript and React

A modern animation library for JavaScript and React

npm install motion

npm install motion

npm install motion

Motion makes animation

Motion makes animation

Motion makes animation

simple, fun, and limitless.

simple, fun, and limitless.

simple, fun, and limitless.

Go beyond the browser with super smooth

Go beyond the browser with super smooth

Go beyond the browser with super smooth

springs, layout animations, timelines

springs, layout animations, timelines

springs, layout animations, timelines

and much, much more.

and much, much more.

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.

// 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 }} />

// 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 }} />

  • Simple

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

  • Transforms

    Go beyond CSS by animating transforms on every axis.

  • Springs

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

  • Scroll

    Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.

  • Exit animations

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

  • Layout animations

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

  • Gestures

    Animate transforms on every axis independently, with full control over timing.

  • Timeline

    Animate transforms on every axis independently, with full control over timing.

  • Simple

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

  • Transforms

    Go beyond CSS by animating transforms on every axis.

  • Springs

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

  • Scroll

    Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.

  • Exit animations

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

  • Layout animations

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

  • Gestures

    Animate transforms on every axis independently, with full control over timing.

  • Timeline

    Animate transforms on every axis independently, with full control over timing.

Our Sponsors

Motion is made possible thanks to our amazing sponsors.

Our Sponsors

Motion is made possible thanks to our amazing sponsors.

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.

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