Skip to main content
Motion provides a powerful React integration that makes it easy to create fluid animations and interactions in your React applications.

​
Installation

Install Motion via npm or yarn: 
npm install motion

yarn add motion

​
Quick Start

Motion exports everything from framer-motion, providing both motion and m components: 
import { motion } from "motion"

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello World
    </motion.div>
  )
}

​
Core Concepts

​
Motion Components

Motion wraps standard HTML and SVG elements with animation capabilities. Any HTML or SVG element can be animated by prefixing it with motion.: 
<motion.div />
<motion.button />
<motion.svg />
<motion.path />

​
Animation Props

Motion components accept several props to control animations:
  • initial - Starting state for animations
  • animate - Target state for animations
  • exit - State when component is removed (requires AnimatePresence)
  • transition - Configuration for the animation
  • style - Enhanced style prop supporting MotionValues
<motion.div
  initial={{ x: -100, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  transition={{ duration: 0.5, ease: "easeOut" }}
/>

​
Gesture Animations

Motion provides declarative gesture handlers: 
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  whileFocus={{ outline: "2px solid blue" }}
>
  Click me
</motion.button>

​
The m Component

For bundle size optimization, Motion also exports a minimal m component with the same API: 
import { m } from "motion"

function App() {
  return <m.div animate={{ x: 100 }} />
}

​
Package Structure

Motion is a re-export of framer-motion, which is part of a larger monorepo:
  • motion - Main package, re-exports everything from framer-motion
  • framer-motion - React-specific animation code
  • motion-dom - Vanilla JavaScript animation library
  • motion-utils - Pure functions and easing utilities

​
TypeScript Support

Motion is written in TypeScript and provides full type definitions: 
import { motion, MotionProps } from "motion"
import { FC } from "react"

const AnimatedCard: FC<MotionProps> = (props) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      {...props}
    />
  )
}

​
Next Steps

​
Performance

Motion is highly optimized for performance:
  • Uses GPU-accelerated transforms when possible
  • Batches reads and writes to prevent layout thrashing
  • Supports reduced motion preferences
  • Provides tools like LazyMotion for code splitting
import { LazyMotion, domAnimation, m } from "motion"

function App() {
  return (
    <LazyMotion features={domAnimation">
      <m.div animate={{ x: 100 }} />
    </LazyMotion>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us