Quickstart

Motion is a simple yet powerful animation library for JavaScript and React. This guide will help you create your first animation.

Installation

Install Motion

React
JavaScript

npm install motion

npm install motion

Import Motion

React
JavaScript

import { motion } from "motion/react"

import { animate } from "motion"

Create your first animation

React
JavaScript

Add the animate prop to a motion component to animate it on mount:

function App() {
  return (
    <motion.div
      animate={{ x: 100 }}
      style={{ width: 100, height: 100, background: "#0077ff" }}
    />
  )
}

The motion.div will slide 100 pixels to the right when it appears.

Use the animate function to animate any element:

import { animate } from "motion"

animate("#box", { x: 100 })

<div id="box" style="width: 100px; height: 100px; background: #0077ff;"></div>

The element will slide 100 pixels to the right.

Add interactivity

Make your animations interactive with hover effects and springs.

React
JavaScript

Use whileHover to animate on hover, and add a spring transition for natural motion:

function App() {
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      transition={{ type: "spring", bounce: 0.4 }}
      style={{ 
        width: 100, 
        height: 100, 
        background: "#0077ff",
        borderRadius: 10
      }}
    />
  )
}

The box will spring and scale up when you hover over it.

Listen to events and trigger animations with springs:

import { animate } from "motion"

const box = document.querySelector("#box")

box.addEventListener("mouseenter", () => {
  animate(box, 
    { scale: 1.2 }, 
    { type: "spring", bounce: 0.4 }
  )
})

box.addEventListener("mouseleave", () => {
  animate(box, 
    { scale: 1 }, 
    { type: "spring", bounce: 0.4 }
  )
})

The box will spring and scale when you hover over it.

Control animations with state

React
JavaScript

Animate based on component state:

import { motion } from "motion/react"
import { useState } from "react"

function App() {
  const [isActive, setIsActive] = useState(false)

  return (
    <motion.div
      animate={{ x: isActive ? 200 : 0 }}
      transition={{ duration: 0.4 }}
      onClick={() => setIsActive(!isActive)}
      style={{ 
        width: 100, 
        height: 100, 
        background: "#0077ff",
        cursor: "pointer"
      }}
    />
  )
}

Click the box to toggle its position.

Control animations programmatically:

import { animate } from "motion"

const box = document.querySelector("#box")
let isActive = false

box.addEventListener("click", () => {
  isActive = !isActive
  animate(box, 
    { x: isActive ? 200 : 0 }, 
    { duration: 0.4 }
  )
})

Click the box to toggle its position.

Next steps

Animation API

Explore Motion’s animation capabilities

Gestures

Add drag, hover, and tap interactions

Spring Physics

Create natural, physics-based animations

Examples

Browse 100+ animation examples

Getting Started

Core Concepts

React

JavaScript

Vue

Guides

Installation

Add interactivity

Control animations with state

Next steps

Animation API

Gestures

Spring Physics

Examples

Build docs developers (and LLMs) love

Getting Started

Core Concepts

React

JavaScript

Vue

Guides

​Installation

​Add interactivity

​Control animations with state

​Next steps

Animation API

Gestures

Spring Physics

Examples

Build docs developers (and LLMs) love

Installation

Add interactivity

Control animations with state

Next steps