Frontend & Design

Framer Motion Animations

Create fluid, production-ready animations and gestures in React with Framer Motion's declarative API.

Claude Code Cursor Copilot Windsurf

Overview

Framer Motion (now Motion) is the most popular animation library for React, providing a declarative API for creating smooth animations, gestures, layout transitions, and scroll-based effects. AI agents can generate animation variants, orchestrate complex sequences, and implement page transitions with minimal code.

The library's `motion` component wrapper makes any HTML or SVG element animatable. Your AI agent can implement entrance animations with `initial` and `animate` props, exit animations with `AnimatePresence`, drag gestures, hover effects, and shared layout animations that smoothly transition elements between different components.

Framer Motion handles the physics-based spring animations and GPU-accelerated transforms that make interfaces feel natural. AI agents can help you create reusable animation presets, implement staggered list animations, build modal and page transitions, and add scroll-triggered reveals throughout your application.

Who Is This For?

Frontend developers adding polished animations to React applications
Design engineers implementing micro-interactions and gesture responses
Teams building animated page transitions and shared layout animations
Developers creating scroll-driven animations and parallax effects

Installation

Setup for Claude Code

npm install motion

Configuration

// Example usage
import { motion, AnimatePresence } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ type: "spring", stiffness: 300 }}
/>