motion

An animation library for JavaScript and React.

weekly downloads4.3M

versionv12.34.2

licenseMIT

categoryanimation

javascript animationreact animationreactthree3danimationgesturesdragspringpopmotionframerwaapi

Overview

Motion is a production-grade animation library that provides GPU-accelerated animations across React, Vue, and vanilla JavaScript through a unified API. Originally known as Framer Motion (React-only), the library was rebranded and expanded to support multiple frameworks while maintaining backward compatibility. It achieves high-performance 120fps animations through a hybrid engine that combines JavaScript flexibility with native browser APIs like the Web Animations API.

The library solves a common pain point in modern web development: implementing smooth, performant animations without learning different tools for different frameworks. Motion provides declarative APIs for React/Vue developers through motion components, alongside imperative functions for vanilla JavaScript users. It handles complex scenarios like layout transitions, scroll-linked animations, and physics-based gestures out of the box.

With over 4 million weekly downloads, Motion is widely adopted in production applications requiring sophisticated UI animations. It's particularly popular among teams building design-forward applications, interactive landing pages, and component libraries where animation quality directly impacts user experience. The library ships with TypeScript definitions, tree-shaking support, and a modular architecture that keeps bundle sizes minimal.

Motion's core philosophy centers on progressive enhancement: start with simple declarative animations, then access lower-level APIs when needed. The spring physics engine provides natural-feeling motion by default, while the gesture system handles drag, pan, and hover interactions with built-in momentum and constraints. Layout animations automatically use transforms under the hood, avoiding expensive layout recalculations.

Quick Start

typescript

import { motion, useScroll, useTransform } from 'motion/react';
import { animate } from 'motion';
import { useRef } from 'react';

function AnimatedCard() {
  const cardRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: cardRef,
    offset: ['start end', 'end start']
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.9]);

  const handleDragEnd = (event, info) => {
    if (Math.abs(info.offset.x) > 100) {
      animate(cardRef.current, { x: info.offset.x > 0 ? 300 : -300, opacity: 0 });
    }
  };

  return (
    <motion.div
      ref={cardRef}
      style={{ opacity, scale }}
      initial={{ y: 50, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: -50, opacity: 0 }}
      whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
      whileTap={{ scale: 0.95 }}
      drag="x"
      dragConstraints={{ left: -50, right: 50 }}
      dragElastic={0.2}
      onDragEnd={handleDragEnd}
      transition={{ type: 'spring', stiffness: 300, damping: 25 }}
      className="card"
    >
      <h2>Drag me horizontally</h2>
      <p>Scroll to see fade and scale effects</p>
    </motion.div>
  );
}

Use Cases

Interactive UI components: Building animated dropdowns, modals, tooltips, and navigation menus with enter/exit animations using AnimatePresence. The gesture system handles drag-to-dismiss patterns and swipeable carousels without manual touch event management.

Scroll-triggered animations: Creating parallax effects, reveal-on-scroll sections, and scroll progress indicators by binding animations to scroll position. The scroll utilities provide normalized progress values that sync with viewport intersection.

Layout transitions: Animating grid layouts, reordering lists, or responsive breakpoint changes where elements move and resize smoothly. Motion's layout prop automatically calculates and animates position/size changes using FLIP technique.

Page transitions: Implementing shared element transitions between routes in single-page applications, where elements morph from one page to another. The layout ID system tracks elements across component unmounts.

Data visualization: Animating chart updates, morphing SVG paths, and creating interactive 3D visualizations with physics-based interactions. Motion works seamlessly with libraries like Three.js and D3 for coordinated animations.

Pros & Cons

Pros

+Unified API across React, Vue, and vanilla JavaScript eliminates need for separate animation libraries per framework
+Declarative syntax with automatic GPU acceleration keeps code clean while achieving 120fps performance
+Built-in layout animations and gesture system handle complex scenarios that would require significant custom code
+Spring physics engine provides natural-feeling motion without manual easing configuration
+Excellent TypeScript support with comprehensive type definitions and intelligent autocomplete
+Small bundle size with tree-shaking support; only import what you use

Cons

−Learning curve for developers unfamiliar with declarative animation paradigms or spring physics concepts
−React bundle size larger than minimalist alternatives like react-spring when only basic animations needed
−Documentation split between legacy Framer Motion resources and newer Motion.dev site can cause confusion
−Advanced features like layout animations may have edge cases with complex CSS layouts or transforms
−Breaking changes from Framer Motion migration require refactoring for existing projects
−Limited server-side rendering support for animations; initial states must be handled carefully

Alternatives

animejsv4.3.6

JavaScript animation engine

animationanimeanimejs

543K / week

framer-motionv12.34.2

A simple and powerful JavaScript animation library

animationreact animationreact

22.4M / week

gsapv3.14.2

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

animationGSAPGreenSock

1.8M / week

react-springv10.0.3

frontendanimatedanimation

838K / week

Comparisons

framer-motion vs motion

animation

Install

bash

npm install motion

bash

pnpm add motion

bash

bun add motion

Overview

Quick Start

typescript

import { motion, useScroll, useTransform } from 'motion/react';
import { animate } from 'motion';
import { useRef } from 'react';

function AnimatedCard() {
  const cardRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: cardRef,
    offset: ['start end', 'end start']
  });
  
  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.9]);

  const handleDragEnd = (event, info) => {
    if (Math.abs(info.offset.x) > 100) {
      animate(cardRef.current, { x: info.offset.x > 0 ? 300 : -300, opacity: 0 });
    }
  };

  return (
    <motion.div
      ref={cardRef}
      style={{ opacity, scale }}
      initial={{ y: 50, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: -50, opacity: 0 }}
      whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
      whileTap={{ scale: 0.95 }}
      drag="x"
      dragConstraints={{ left: -50, right: 50 }}
      dragElastic={0.2}
      onDragEnd={handleDragEnd}
      transition={{ type: 'spring', stiffness: 300, damping: 25 }}
      className="card"
    >
      <h2>Drag me horizontally</h2>
      <p>Scroll to see fade and scale effects</p>
    </motion.div>
  );
}

Use Cases

Pros & Cons

Pros

+Unified API across React, Vue, and vanilla JavaScript eliminates need for separate animation libraries per framework
+Declarative syntax with automatic GPU acceleration keeps code clean while achieving 120fps performance
+Built-in layout animations and gesture system handle complex scenarios that would require significant custom code
+Spring physics engine provides natural-feeling motion without manual easing configuration
+Excellent TypeScript support with comprehensive type definitions and intelligent autocomplete
+Small bundle size with tree-shaking support; only import what you use

Cons

−Learning curve for developers unfamiliar with declarative animation paradigms or spring physics concepts
−React bundle size larger than minimalist alternatives like react-spring when only basic animations needed
−Documentation split between legacy Framer Motion resources and newer Motion.dev site can cause confusion
−Advanced features like layout animations may have edge cases with complex CSS layouts or transforms
−Breaking changes from Framer Motion migration require refactoring for existing projects
−Limited server-side rendering support for animations; initial states must be handled carefully