# Framer Motion Variants

> Official Framer Motion skill for animation variants — state machines, orchestrated animations, stagger, repeat, sequencing. Use when building orchestrated animations, animation state machines, staggered entrances, or when asking about Framer Motion variants, transition variants, or choreographed animations.

- **Type:** Skill
- **Install:** `agentstack add skill-c-jeril-framer-motion-skills-framer-motion-variants`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [C-Jeril](https://agentstack.voostack.com/s/c-jeril)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [C-Jeril](https://github.com/C-Jeril)
- **Source:** https://github.com/C-Jeril/framer-motion-skills/tree/main/skills/framer-motion-variants
- **Website:** https://kuakua.app

## Install

```sh
agentstack add skill-c-jeril-framer-motion-skills-framer-motion-variants
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Framer Motion Variants

## When to Use This Skill

Apply when building multi-step animations, coordinated animations across multiple elements, or when using variants for state-based animation control. Variants are Framer Motion's way of defining reusable animation states that can be choreographed.

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

## Defining Variants

Variants are objects that define animation states:

```jsx
const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
};

function Component() {
  return (
    
      {[1, 2, 3].map(i => (
        
      ))}
    
  );
}
```

## Variant Types

### Static Variants

```jsx
const variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 }
};
```

### Dynamic Variants

```jsx
const variants = {
  animate: (custom) => ({
    x: custom * 100,
    opacity: 1
  })
};
```

## Orchestration

### staggerChildren

Stagger children animations:

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

### staggerDirection

```jsx
transition: {
  staggerChildren: 0.1,
  staggerDirection: -1  // 1 = forward, -1 = backward
}
```

## Repeating Animations

```jsx
const variants = {
  animate: {
    scale: [1, 1.5, 1],
    transition: {
      duration: 2,
      repeat: Infinity,
      repeatType: "loop"  // "loop" | "reverse" | "mirror"
    }
  }
};
```

### repeatType Options

| Type | Behavior |
|------|----------|
| `"loop"` | Restart from beginning |
| `"reverse"` | Play forward then backward |
| `"mirror"` | Swap states on each repeat |

## Keyframes

Animate through multiple values:

```jsx

```

## State Machine with custom

```jsx
const states = {
  idle: { scale: 1 },
  hovered: { scale: 1.1 },
  pressed: { scale: 0.95 }
};

function Component({ state }) {
  return (
    
  );
}
```

## Parent-Child Coordination

```jsx
const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      when: "beforeChildren"
    }
  }
};

const child = {
  hidden: { x: -20, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1,
    transition: { duration: 0.3 }
  }
};
```

## Best practices

- ✅ Use **variants** for reusable, coordinated animations.
- ✅ Use **staggerChildren** for list animations.
- ✅ Use **custom** prop to pass dynamic values.
- ✅ Define **exit** variants for AnimatePresence.
- ✅ Use **when** option for parent-child coordination.

## Do Not

- ❌ Mix motion values and variants incorrectly.
- ❌ Forget that variant transitions can be overridden.
- ❌ Use too many variant states (keep to 3-5).
- ❌ Forget to pass `custom` when needed.

### Learn More

https://www.framer.com/motion/animation/
https://www.framer.com/motion/variants/

## Source & license

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

- **Author:** [C-Jeril](https://github.com/C-Jeril)
- **Source:** [C-Jeril/framer-motion-skills](https://github.com/C-Jeril/framer-motion-skills)
- **License:** MIT
- **Homepage:** https://kuakua.app

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-c-jeril-framer-motion-skills-framer-motion-variants
- Seller: https://agentstack.voostack.com/s/c-jeril
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.