Home/Frontend & UI/Framer Motion

Frontend & UI

Framer Motion

TypeScriptReactAnimationOpen-source

The most popular React animation library. Framer Motion provides a declarative API for complex animations, gestures, and layout transitions with minimal code.

License

MIT

Language

TypeScript

Trust

Fair

Why Framer Motion?

Adding fluid animations to React applications

Complex gesture interactions (drag, hover, tap)

Page transitions and shared element animations

Signal Breakdown

What drives the Trust Score

npm downloads

3M / wk

Commits (90d)

60 commits

GitHub stars

24k ★

Stack Overflow

8k q's

Community

Very large

Weighted Trust Score58 / 100

Download Trend

Last 12 months

Tradeoffs & Caveats

Know before you commit

Simple CSS transitions (overkill for basic hover effects)

Performance-critical animations at 60fps+ (consider CSS)

Non-React projects

Pricing

Free tier & paid plans

Free tier

100% free, open-source (MIT)

Paid

Free & open-source

No paid tiers

Often Used Together

Complementary tools that pair well with Framer Motion

Next.js

Frontend & UI

98Excellent

View

Tailwind CSS

Frontend & UI

90Excellent

View

Radix UI

Frontend & UI

33Limited

View

shadcn/ui

Frontend & UI

84Strong

View

Vercel

Hosting & Deploy

89Strong

View

Learning Resources

Docs, videos, tutorials, and courses

Framer Motion Docs

docs

GitHub repo

github

Framer Motion introduction

tutorial

Get Started

Repository and installation options

View on GitHub

github.com/framer/motion

npmnpm install framer-motion

Quick Start

Copy and adapt to get going fast

import { motion } from 'framer-motion';

export function FadeIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      {children}
    </motion.div>
  );
}

Code Examples

Common usage patterns

Staggered list animation

Animate list items one by one

const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } };
const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 } };

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.li key={i.id} variants={item}>{i.name}</motion.li>)}
</motion.ul>

Drag interaction

Make elements draggable

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  whileDrag={{ scale: 1.1, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
  className="cursor-grab active:cursor-grabbing w-32 h-32 bg-indigo-500 rounded-2xl"
/>

Community Notes

Real experiences from developers who've used this tool

import { motion } from 'framer-motion'; export function FadeIn({ children }: { children: React.ReactNode }) { return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} > {children} </motion.div> ); }

const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 } }; <motion.ul variants={container} initial="hidden" animate="show"> {items.map(i => <motion.li key={i.id} variants={item}>{i.name}</motion.li>)} </motion.ul>

<motion.div drag dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }} whileDrag={{ scale: 1.1, boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }} className="cursor-grab active:cursor-grabbing w-32 h-32 bg-indigo-500 rounded-2xl" />