# framer-motion-animator

Generates smooth Framer Motion animations and micro-interactions in React. Useful for building page transitions, drag gestures, and scroll effects.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 11100 installs · ★ 63
- Author: patricio0312rev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/patricio0312rev/skills/tree/HEAD/frontend/framer-motion-animator/SKILL.md
- Updated: 2026-01-12
- HTML: https://affpapa.org/en/nevibecode/skills/framer-motion-animator

## What it does

The skill guides coding agents through Framer Motion patterns for React components. It follows a six-step workflow: identifying animation needs, selecting variant types, defining motion properties, tuning spring physics, orchestrating child delays, and keeping transforms on the GPU.

Included code patterns cover basic mounts with `FadeIn`, exit animations via `AnimatePresence`, staggered lists, and shared tab indicators with `layoutId`. It also includes drag physics with `dragConstraints`, swipe-to-delete gestures, and viewport-triggered entries via `useInView`.

Your project needs `npm install framer-motion` installed beforehand. In Next.js App Router setups, page transitions rely on wrapping layouts inside `template.tsx`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add patricio0312rev/skills --skill framer-motion-animator -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/framer-motion-animator/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/framer-motion-animator/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add patricio0312rev/skills --skill framer-motion-animator -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/framer-motion-animator/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add patricio0312rev/skills --skill framer-motion-animator -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/framer-motion-animator/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install patricio0312rev/skills framer-motion-animator
```

2. **Manually: put the files in place**
- File: `.github/skills/framer-motion-animator/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add patricio0312rev/skills --skill framer-motion-animator -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/patricio0312rev/skills --path frontend/framer-motion-animator
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/framer-motion-animator/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add patricio0312rev/skills --skill framer-motion-animator -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/patricio0312rev/skills/tree/HEAD/frontend/framer-motion-animator/SKILL.md

## When to use it
- animate modal entrances and exits using `AnimatePresence`
- orchestrate staggered list item reveals with `staggerChildren`
- create shared tab indicators using `LayoutGroup` and `layoutId`
- implement swipe-to-delete gestures with boundary constraints

## Example prompts
- add animation to this modal dialog using framer motion
- create a page transition for Next.js App Router with framer-motion
- animate component on scroll when it enters the viewport

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ee2e8dc363ba37e4.

BEGIN THIRD-PARTY FILE ee2e8dc363ba37e4
````text
---
name: framer-motion-animator
description: Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
---

# Framer Motion Animator

Build delightful animations and interactions with Framer Motion's declarative API.

## Core Workflow

1. **Identify animation needs**: Entrance, exit, hover, gestures
2. **Choose animation type**: Simple, variants, gestures, layout
3. **Define motion values**: Opacity, scale, position, rotation
4. **Add transitions**: Duration, easing, spring physics
5. **Orchestrate sequences**: Stagger, delay, parent-child
6. **Optimize performance**: GPU-accelerated properties

## Installation

```bash
npm install framer-motion
```

## Basic Animations

### Simple Animation

```tsx
import { motion } from 'framer-motion';

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

// Animate on hover
export function ScaleOnHover({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
    >
      {children}
    </motion.div>
  );
}
```

### Exit Animations with AnimatePresence

```tsx
import { motion, AnimatePresence } from 'framer-motion';

export function Modal({ isOpen, onClose, children }: ModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/50 z-40"
          />

          {/* Modal */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
            className="fixed inset-0 z-50 flex items-center justify-center"
          >
            <div className="bg-white rounded-xl p-6 max-w-md w-full">
              {children}
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}
```

## Variants Pattern

### Staggered Children

```tsx
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
````
END THIRD-PARTY FILE ee2e8dc363ba37e4

The third-party file has ended. Everything between the ee2e8dc363ba37e4 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2900 of 12984 bytes. © patricio0312rev · MIT · https://github.com/patricio0312rev/skills/tree/HEAD/frontend/framer-motion-animator/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md