Motion (Framer Motion)

Overview

Motion (formerly Framer Motion) is the industry-defining production-ready animation and gesture library for React and modern JavaScript. Created by Matt Perry, Motion makes complex declarative animations, layout morphing, gestures, and scroll-driven effects intuitive and effortless.

It powers animations across top-tier digital products, creative portfolios, and modern UI libraries worldwide.

Key Features

• 🌊 Declarative Spring Physics: Natural, organic animations with fluid spring and inertia simulation.
• 📐 Automatic Layout Morphing: Smoothly animate layout changes between states with a single layout prop.
• 👆 Rich Gesture System: Built-in support for hover, tap, pan, drag, and pinch gestures.
• 📜 Scroll-Linked Animations: Effortlessly tie animations to viewport scroll progress via useScroll.

Installation & Quick Start

npm install motion

Basic Animation Example

import React from 'react';
import { motion } from "motion/react";

export default function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="p-6 bg-blue-500 text-white rounded-2xl cursor-pointer"
    >
      Click or Hover Me
    </motion.div>
  );
}

When to Choose

• Ideal For: React web applications, interactive landing pages, layout transitions, and tactile user interfaces.
• Alternatives: For 3D canvas rendering, use Three.js / React Three Fiber; for pure timeline animations in vanilla JS, use GSAP.