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