Framer Motion Variants

C-Jeril/framer-motion-skills/skills/framer-motion-variants

by C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 6 months ago

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.

Instructions onlySoftware Development

AI-generated overview

Reference guide for Framer Motion animation variants, covering state machines, orchestration, stagger, repeat and keyframes.

What it does: This skill is an instructional reference for using Framer Motion variants to define reusable animation states. It shows how to declare static and dynamic variants, orchestrate parent-child animations with staggerChildren, staggerDirection and the when option, and configure repeating animations and keyframes. It also lists best practices and common mistakes, with code examples throughout.
When to use it: Use it when building multi-step or coordinated animations across several elements, or when controlling animation through state-based variants. It is also relevant when asking about Framer Motion variants, transition variants or choreographed animations.
Requirements: No scripts or assets ship with the skill; it is instructions only. It assumes the reader is working with Framer Motion in a JavaScript or React project.

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 (    <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

Dynamic Variants

Orchestration

staggerChildren

Stagger children animations:

staggerDirection

Repeating Animations

repeatType Options

Keyframes

Animate through multiple values:

State Machine with custom

jsx

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

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 and attribution

Source:C-Jeril/framer-motion-skillsinskills/framer-motion-variantsat commit837d726

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from C-Jeril/framer-motion-skills

Framer Motion Scroll

C-Jeril

Reference guide for building scroll-linked animations with Framer Motion's useScroll, useTransform, and useInView hooks.

Software Development8updated 6 months ago

Framer Motion Gestures

C-Jeril

Reference guide for Framer Motion gesture animations covering drag, pan, tap, hover, and focus interactions.

Software Development8updated 6 months ago

Framer Motion React

C-Jeril

Guides Framer Motion animation patterns in React, covering AnimatePresence, layout animations, useAnimation and SSR handling.

Software Development8updated 6 months ago

Framer Motion Layout

C-Jeril

Reference guide for Framer Motion layout animations: the layout prop, layoutId shared transitions, AnimatePresence and exit animations.

Software Development8updated 6 months ago

More in Software Development

Playground

anthropics

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago

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>  );}

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}    />  );}

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 }  }};