Framer Motion Variants

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

作者 C-Jeril837d7268fc4a3cf5b1f8904616ec97c7485e3edaMIT8 个星标收录于 2026年10月9日更新于 2026年10月9日仓库6个月前更新

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.

仅含说明Software Development

AI 生成的概览

Framer Motion 动画变体参考指南，涵盖状态机、编排、错峰、重复与关键帧。

功能: 该技能是一份关于使用 Framer Motion 变体定义可复用动画状态的说明性参考。它讲解如何声明静态与动态变体，如何通过 staggerChildren、staggerDirection 和 when 选项编排父子动画，以及如何配置重复动画和关键帧。文中还列出最佳实践与常见错误，并配有代码示例。
适用场景: 适用于构建跨多个元素的多步骤或协同动画，或通过基于状态的变体控制动画时。在询问 Framer Motion 变体、过渡变体或编排动画时同样适用。
运行要求: 该技能不附带脚本或资源，仅为说明性内容。它假定使用者正在 JavaScript 或 React 项目中使用 Framer Motion。

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

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:

jsx

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

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

staggerDirection

Repeating Animations

jsx

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

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

repeatType Options

Keyframes

Animate through multiple values:

jsx

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

<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

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

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

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/

来源与署名

来源：C-Jeril/framer-motion-skills位于skills/framer-motion-variants提交837d726

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

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

Framer Motion Variants

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

来源与署名

更多来自 C-Jeril/framer-motion-skills 的技能

Framer Motion Scroll

Framer Motion Gestures

Framer Motion React

Framer Motion Layout

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices