Framer Motion Guide

Framer MotionProduction-Ready Motion Library

Create smooth animations and gestures in React with a simple, declarative API.

Contents

Getting Started

Framer Motion provides motion components and hooks to create animations in React.

bash
# Installation
npm install framer-motion
jsx
import { motion } from 'framer-motion';

// Basic Animation
function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      className="w-32 h-32 bg-blue-500 rounded-lg"
    />
  );
}

// Hover Animation
function HoverButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      className="px-6 py-3 bg-blue-500 text-white rounded-lg"
    >
      Hover Me
    </motion.button>
  );
}

// Animation Properties
<motion.div
  animate={{
    x: 100,
    y: 100,
    rotate: 45,
    scale: 1.5,
    opacity: 0.5,
  }}
  transition={{
    duration: 0.5,
    ease: "easeInOut",
  }}
/>

// Keyframe Animations
<motion.div
  animate={{
    scale: [1, 1.5, 1],
    rotate: [0, 90, 0],
  }}
  transition={{
    duration: 2,
    repeat: Infinity,
  }}
/>