Motion Framer

Motion & Framer Motion

Overview

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

When to use this skill:

• Building interactive UI components (buttons, cards, menus)
• Creating micro-interactions and hover effects
• Implementing page transitions and route animations
• Adding scroll-based animations and parallax effects
• Animating layout changes (resizing, reordering, shared element transitions)
• Drag-and-drop interfaces
• Complex animation sequences and state-based animations
• Replacing CSS transitions with more powerful, controllable animations

Technology:

• Motion (v11+) - The modern, smaller library from Framer Motion creators
• Framer Motion - The full-featured predecessor (still widely used)
• React 18+ compatible, also supports Vue
• Supports TypeScript
• Works with Next.js, Vite, Remix, and all modern React frameworks

Core Concepts

1. Motion Components

Convert any HTML/SVG element into an animatable component by prefixing with motion.:

import { motion } from "framer-motion"

// Regular HTML becomes motion component

Every motion component accepts animation props like animate, initial, transition, and gesture props like whileHover, whileTap, etc.

2. Animate Prop

The animate prop defines the target animation state. When values change, Motion automatically animates to them:

// Simple animation - x position changes

// Multiple properties

// Animates when state changes
const [isOpen, setIsOpen] = useState(false)

3. Initial State

Set the initial state before animation using the initial prop:

Set initial={false} to disable initial animations on mount.

4. Transitions

Control how animations move between states using the transition prop:

// Duration-based

// Spring physics

// Different transitions for different properties

Transition types:

• "tween" (default) - Duration-based with easing
• "spring" - Physics-based spring animation
• "inertia" - Decelerating animation (used in drag)

5. Variants

Organize animation states using named variants for cleaner code and propagation to children:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
  exit: { opacity: 0, scale: 0.9 }
}

Variant propagation - Children automatically inherit parent variant states:

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1  // Stagger child animations
    }
  }
}

const itemVariants = {
  hidden: { x: -20, opacity: 0 },
  visible: { x: 0, opacity: 1 }
}

  
  
  

Common Patterns

1. Hover Animations

Animate on hover using whileHover prop:

// Simple hover effect

  Hover me

// Multiple properties

  Hover card

// With custom transition

  Button

Hover with nested elements:

  Title
  

2. Tap/Press Animations

Animate on tap/press using whileTap prop:

// Scale down on tap

  Click me

// Combined hover + tap

  Interactive button

// With variants
const buttonVariants = {
  rest: { scale: 1 },
  hover: { scale: 1.1 },
  pressed: { scale: 0.95 }
}

  Button

3. Drag Interactions

Make elements draggable with the drag prop:

// Basic dragging (both axes)

// Constrain to axis
  // Only horizontal
  // Only vertical

// Drag constraints

// Drag with parent constraints

  

// Visual feedback while dragging

Drag events:

 console.log(info.point)}
  onDrag={(event, info) => console.log(info.offset)}
  onDragEnd={(event, info) => console.log(info.velocity)}
/>

4. Exit Animations (AnimatePresence)

Animate components when they're removed from the DOM using AnimatePresence:

import { AnimatePresence } from "framer-motion"

// Basic exit animation

  {isVisible && (
    
  )}

Key requirements:

• Component must be direct child of ``
• Must have a unique key prop
• Use exit prop to define exit animation

List items with exit animations:

  {items.map(item => (
    
      {item.name}
    
  ))}

Staggered exit animations:

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.1
    }
  },
  exit: {
    opacity: 0,
    transition: {
      when: "afterChildren",
      staggerChildren: 0.05,
      staggerDirection: -1  // Reverse order
    }
  }
}

  {show && (
    
      
      
      
    
  )}

5. Layout Animations

Automatically animate layout changes (position, size) with the layout prop:

// Animate all layout changes

// Animate only position changes

// Animate only size changes

Grid layout animation:

const [columns, setColumns] = useState(3)

  {items.map(item => (
    
  ))}

Shared layout animations (layoutId):

Connect two different elements for smooth transitions using layoutId:

// Tab indicator example

  {tabs.map(tab => (
     setActive(tab.id)}>
      {tab.label}
      {activeTab === tab.id && (
        
      )}
    
  ))}

// Modal opening from thumbnail
 setExpanded(true)}
/>

  {expanded && (
    
      
    
  )}

6. Scroll-Based Animations

Animate elements when they enter the viewport using whileInView:

  Animates when scrolled into view

Viewport options:

• once: true - Animation triggers only once
• amount: 0.5 - Percentage of element visible (0-1) or "some" | "all"
• margin: "-100px" - Offset viewport boundaries

Staggered scroll animations:

7. Spring Animations

Use spring physics for natural, bouncy animations:

// Basic spring

// Customize spring physics

// Visual duration (easier spring control)

Spring presets:

• Gentle: stiffness: 100, damping: 20
• Wobbly: stiffness: 200, damping: 10
• Stiff: stiffness: 400, damping: 30
• Slow: stiffness: 50, damping: 20

Gesture Recognition

Motion provides declarative gesture handlers:

Gesture Props

Gesture Events

 {}}
  onHoverEnd={(event, info) => {}}
  onTap={(event, info) => {}}
  onTapStart={(event, info) => {}}
  onTapCancel={(event, info) => {}}
  onDragStart={(event, info) => {}}
  onDrag={(event, info) => {}}
  onDragEnd={(event, info) => {}}
  onViewportEnter={(entry) => {}}
  onViewportLeave={(entry) => {}}
/>

Event info objects contain:

• point: { x, y } - Page coordinates
• offset: { x, y } - Offset from drag start
• velocity: { x, y } - Drag velocity

Hooks

useAnimate

Manually control animations with the useAnimate hook:

import { useAnimate } from "framer-motion"

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // Animate multiple elements
    animate([
      [scope.current, { opacity: 1 }],
      ["li", { x: 0, opacity: 1 }, { delay: stagger(0.1) }],
      [".button", { scale: 1.2 }]
    ])
  }, [])

  return (
    
      
        Item 1
        Item 2
      
      Click
    
  )
}

Animation controls:

const controls = animate(element, { x: 100 })
controls.play()
controls.pause()
controls.stop()
controls.speed = 0.5
controls.time = 0  // Seek to start

useSpring

Create spring-animated motion values:

import { useSpring } from "framer-motion"

function Component() {
  const x = useSpring(0, { stiffness: 300, damping: 20 })

  return (
    
       x.set(100)}>Move
    
  )
}

useInView

Detect when an element is in viewport:

import { useInView } from "framer-motion"

function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })

  return (
    
      {isInView ? "In view!" : "Not in view"}
    
  )
}

Integration Patterns

With GSAP

Combine Motion for React state-based animations and GSAP for complex timelines:

import { motion } from "framer-motion"
import gsap from "gsap"

function Component() {
  const boxRef = useRef()

  const handleClick = () => {
    // Use GSAP for complex timeline
    const tl = gsap.timeline()
    tl.to(boxRef.current, { rotation: 360, duration: 1 })
      .to(boxRef.current, { scale: 1.5, duration: 0.5 })
  }

  return (
    // Use Motion for hover/tap/layout animations
    
  )
}

With React Three Fiber

Animate 3D objects using Motion values:

import { motion } from "framer-motion"
import { useFrame } from "@react-three/fiber"

function Box() {
  const x = useMotionValue(0)

  useFrame(() => {
    // Sync Motion value with Three.js position
    meshRef.current.position.x = x.get()
  })

  return (
    <>
      
        
        
      
      
    
  )
}

With Form Libraries

Animate form validation states:

import { motion, AnimatePresence } from "framer-motion"

function FormField({ error }) {
  return (
    
      
      
        {error && (
          
            {error}
          
        )}
      
    
  )
}

Performance Optimization

1. Use Transform Properties

Transform properties (x, y, scale, rotate) are hardware-accelerated:

// ✅ Good - Hardware accelerated

// ❌ Avoid - Triggers layout/paint

2. Individual Transform Properties

Motion supports individual transform properties for cleaner code:

// Individual properties (Motion feature)

// Traditional (also supported)

3. Reduce Motion for Accessibility

Respect user preferences for reduced motion:

import { useReducedMotion } from "framer-motion"

function Component() {
  const shouldReduceMotion = useReducedMotion()

  return (
    
  )
}

4. Layout Animations Performance

Layout animations can be expensive. Optimize with:

// Specify what to animate
  // Only position, not size

// Optimize transition

5. Use layoutId Sparingly

layoutId creates shared layout animations but tracks elements globally. Use only when needed.

Common Pitfalls

1. Forgetting AnimatePresence for Exit Animations

Problem: Exit animations don't work

// ❌ Wrong - No AnimatePresence
{show && }

// ✅ Correct - Wrapped in AnimatePresence

  {show && }

2. Missing key Prop in Lists

Problem: AnimatePresence can't track elements

// ❌ Wrong - No key

  {items.map(item => )}

// ✅ Correct - Unique keys

  {items.map(item => (
    
  ))}

3. Animating Non-Transform Properties

Problem: Janky animations, poor performance

// ❌ Avoid - Not hardware accelerated

// ✅ Better - Use transforms

4. Overusing Layout Animations

Problem: Performance issues with many layout-animated elements

// ❌ Too many layout animations
{items.map(item => {item})}

// ✅ Use layout only where needed, optimize others
{items.map(item => (
  
))}

5. Not Using Variants for Complex Animations

Problem: Duplicated animation code, no child orchestration

// ❌ Repetitive

// ✅ Use variants
const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
}

6. Incorrect Transition Timing

Problem: Transitions don't apply to specific gestures

// ❌ Wrong - General transition won't apply to whileHover

// ✅ Correct - Transition in whileHover or separate gesture transition

Resources

Official Documentation

• Motion Docs - Official Motion documentation
• Framer Motion Docs - Framer Motion (legacy)
• Motion GitHub - Source code & examples

Bundled Resources

This skill includes:

references/

• api_reference.md - Complete Motion API reference
• variants_patterns.md - Variant patterns and orchestration
• gesture_guide.md - Comprehensive gesture handling guide

scripts/

• animation_generator.py - Generate Motion component boilerplate
• variant_builder.py - Interactive variant configuration tool

assets/

• starter_motion/ - Complete Motion + Vite starter template
• examples/ - Real-world Motion component patterns

Community Resources

• Motion Dev Discord - Official community
• Framer Motion Examples - Interactive examples
• Motion Recipes - Common patterns
• CodeSandbox Templates - Live demos

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: freshtechbro
• Source: freshtechbro/claudedesignskills
• License: MIT

Install and usage instructions live in the source repository linked above.