framer-motion-variants

Q: How do I install framer-motion-variants?

Run npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-variants in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/framer-motion-variants/ (personal) or .claude/skills/framer-motion-variants/ (project).

by c-jerilFrontend & Design

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.

Installs: 771
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-variants

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads framer-motion-variants automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

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 (
    <motion.div
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {[1, 2, 3].map(i => (
        <motion.div key={i} variants={item} />
      ))}
    </motion.div>
  );
}

Variant Types

Static Variants

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

Dynamic Variants

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

Orchestration

staggerChildren

Stagger children animations:

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

staggerDirection

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

Repeating Animations

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:

<motion.div
  animate={{
    x: [0, 100, -50, 0],
    backgroundColor: ["#ff0000", "#00ff00", "#0000ff"]
  }}
  transition={{
    duration: 2,
    times: [0, 0.3, 0.6, 1]
  }}
/>

State Machine with custom

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

function Component({ state }) {
  return (
    <motion.div
      variants={states}
      animate={state}
      custom={state}
    />
  );
}

Parent-Child Coordination

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/

FAQ

What does the framer-motion-variants skill do?

How do I install framer-motion-variants?

Run npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-variants in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/framer-motion-variants/ (personal) or .claude/skills/framer-motion-variants/ (project).

Which AI agents can use framer-motion-variants?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is framer-motion-variants safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains framer-motion-variants?

It is published by c-jeril in c-jeril/framer-motion-skills. It has 771 recorded installs.

More from c-jeril/framer-motion-skills

View all →

framer-motion-react

c-jeril/framer-motion-skills

Official Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.

Frontend & Design828 installs

framer-motion-scroll

c-jeril/framer-motion-skills

Official Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.

815 installs

framer-motion-layout

c-jeril/framer-motion-skills

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.

Frontend & Design782 installs

framer-motion-gestures

c-jeril/framer-motion-skills

Official Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.

778 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

framer-motion-variants

Install

Install

Describe the task

Review the result

SKILL.md

Framer Motion Variants

When to Use This Skill

Defining Variants

Variant Types

Static Variants

Dynamic Variants

Orchestration

staggerChildren

staggerDirection

Repeating Animations

repeatType Options

Keyframes

State Machine with custom

Parent-Child Coordination

Best practices

Do Not

Learn More

FAQ

More from c-jeril/framer-motion-skills

Popular frontend & design skills