Framer Motion

Framer Motion Patterns

Animation patterns for React/Next.js using Framer Motion. Use for scroll-triggered reveals, hover states, transitions, and micro-interactions.

Installation

pnpm add framer-motion

Core Patterns

Fade-up on scroll (section entries)

import { motion } from 'framer-motion'

  {children}

Staggered children (card grids, lists)

const container = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.08,
    },
  },
}

const item = {
  hidden: { opacity: 0, y: 16 },
  show: { opacity: 1, y: 0, transition: { duration: 0.4 } },
}

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

Hover scale (cards, buttons)

  {children}

Smooth accordion (FAQ)

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

  {isOpen && (
    
      {content}
    
  )}

Navigation blur on scroll

const [scrolled, setScrolled] = useState(false)

useEffect(() => {
  const handler = () => setScrolled(window.scrollY > 20)
  window.addEventListener('scroll', handler)
  return () => window.removeEventListener('scroll', handler)
}, [])

Page/section transitions

Timing Guidelines

• Micro-interactions (hover, tap): 100-200ms
• Element reveals (fade-up): 300-500ms
• Section transitions: 400-600ms
• Stagger delay between children: 50-100ms
• Spring stiffness for UI: 300-500
• Spring damping for UI: 20-30

Principles

• Every animation serves a purpose: direct attention, confirm interaction, or reveal content
• No decorative animation — if removing it doesn't hurt clarity, remove it
• Use viewport={{ once: true }} for scroll reveals so they don't replay
• Prefer springs over duration-based for interactive elements (hover, drag)
• Prefer easeOut for entrances, easeIn for exits
• Keep total animation time under 600ms — anything longer feels sluggish
• Use DialKit to tune spring values in real time during polish phase

Native View Transitions

If the task is specifically about route transitions, shared-element morphs, browser-native transitions, or React `, load view-transitions` instead of solving it with Framer Motion by default. View Transitions are better for continuity between DOM states; Framer Motion remains better for gesture-driven and component-local animation.

Source & license

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

• Author: tommylower
• Source: tommylower/cortex
• License: MIT

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