# framer-motion-layout

Provides layout animation patterns for Framer Motion, covering shared element transitions with layoutId, reorderable lists, and exit sequences via AnimatePresence.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 770 installs · ★ 10
- Author: C-Jeril
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/C-Jeril/framer-motion-skills/tree/HEAD/skills/framer-motion-layout/SKILL.md
- Updated: 2026-04-02
- HTML: https://affpapa.org/en/nevibecode/skills/framer-motion-layout

## What it does

This skill guides your coding agent through Framer Motion layout transitions in React projects. It demonstrates how to toggle `layout` props for position or sizing changes, morph components across pages using `layoutId`, and build interactive drag-to-reorder lists.

The instructions cover `AnimatePresence` modes like `sync`, `wait`, and `popLayout` to handle mounting and unmounting DOM nodes cleanly. It also includes code patterns for responsive grid layouts and crossfade morphing between different shapes.

Omitting `key` props on children or reusing identical `layoutId` values at the same DOM tier breaks layout calculation instantly. The skill also explicitly warns against animating too many layout items at once without grouping.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install C-Jeril/framer-motion-skills framer-motion-layout
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/C-Jeril/framer-motion-skills --path skills/framer-motion-layout
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-layout -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/C-Jeril/framer-motion-skills/tree/HEAD/skills/framer-motion-layout/SKILL.md

## When to use it
- Animate shared element transitions between pages or modal overlays with `layoutId`
- Handle element exit transitions smoothly when unmounting components with `AnimatePresence`
- Build drag-and-drop reorderable lists using the `layout` prop
- Morph component shapes and border radius during layout state changes

## Example prompts
- Build a shared element transition between a card list and a modal overlay using `layoutId`
- Set up exit animations for a todo list using `AnimatePresence` with `mode="popLayout"`
- Implement a reorderable grid with Framer Motion drag constraints and automatic layout animation

## 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: dd334a897f5dccf5.

BEGIN THIRD-PARTY FILE dd334a897f5dccf5
````text
---
name: framer-motion-layout
description: Official Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.
license: MIT
---

# Framer Motion Layout Animations

## When to Use This Skill

Apply when implementing shared element transitions, layout animations for reordering, or coordinated mount/unmount animations. When the user asks about Framer Motion layout animations, layoutId, or AnimatePresence.

**Related skills:** For core animation use **framer-motion-core**; for variants use **framer-motion-variants**; for React integration use **framer-motion-react**.

## Layout Prop

The `layout` prop enables automatic position animations when layout changes:

```jsx
<motion.div layout>
  {items.map(item => (
    <motion.div key={item.id} layout />
  ))}
</motion.div>
```

### Layout Modes

| Mode | Behavior |
|------|----------|
| `true` | Animate position and size |
| `"position"` | Animate only position |
| `"size"` | Animate only size |

```jsx
<motion.div layout="position" />
<motion.div layout="size" />
```

## layoutId for Shared Element Transitions

`layoutId` enables smooth transitions between elements in different components:

### Page Transitions

```jsx
// Page A
function CardA() {
  return <motion.div layoutId="card" />;
}

// Page B
function CardB() {
  return <motion.div layoutId="card" />;
}
```

When CardA unmounts and CardB mounts with the same `layoutId`, Framer Motion animates the element smoothly between positions.

### Modal Overlays

```jsx
function ListItem({ item, onClick }) {
  return (
    <motion.div layoutId={`item-${item.id}`} onClick={onClick}>
      {item.name}
    </motion.div>
  );
}

function Modal({ item }) {
  return (
    <motion.div layoutId={`item-${item.id}`}>
      <h2>{item.name}</h2>
      <p>{item.description}</p>
    </motion.div>
  );
}
```

## AnimatePresence for Layout

AnimatePresence enables exit animations:

```jsx
import { AnimatePresence, motion } from "framer-motion";

function TodoList({ todos }) {
  return (
    <motion.ul>
      <AnimatePresence>
        {todos.map(todo => (
          <motion.li
            key={todo.id}
            layout
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 20 }}
          />
        ))}
      </AnimatePresence>
    </motion.ul>
  );
}
```

### AnimatePresence Modes

```jsx
<AnimatePresence mode="wait">
  {isOpen && <Modal key="modal" />}
</AnimatePresence>
```

| Mode | Description |
````
END THIRD-PARTY FILE dd334a897f5dccf5

The third-party file has ended. Everything between the dd334a897f5dccf5 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 2703 of 5896 bytes. © C-Jeril · MIT · https://github.com/C-Jeril/framer-motion-skills/tree/HEAD/skills/framer-motion-layout/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