Framer Motion

dylantarre/animation-principles/skills/09-by-tool-framework/framer-motion

作者 dylantarre83597134ba8ff59838270f94d7ac7282ffa3b54d無授權條款99 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫9 個月前更新

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

僅含說明Software Development Design & Creative

AI 產生的概覽

在 React 中以 Framer Motion 實作迪士尼十二項動畫原則的參考指南。

功能: 提供程式碼片段，說明迪士尼十二項動畫原則如何對應 Framer Motion 的宣告式 React API，涵蓋擠壓拉伸、預備動作、構圖、時間控制、誇張與吸引力等。也包含子元素錯開動畫模式，以及 variants、手勢動畫、AnimatePresence 與版面動畫等核心功能的簡要清單。產出的是教學參考內容，而非產生的檔案。
適用情境: 適用於在以 Framer Motion 開發的 React 應用中加入或調整動效，並希望動畫遵循既有原則的情境。也適合在為介面元素挑選轉場、緩動或手勢行為時參考。
執行需求: 此技能不附帶指令碼或資源，僅為說明文件。若要套用範例，需要已安裝 Framer Motion 套件的 React 專案。

Framer Motion Animation Principles

Implement all 12 Disney animation principles using Framer Motion's declarative React API.

1. Squash and Stretch

jsx

<motion.div  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}  transition={{ duration: 0.3, times: [0, 0.5, 1] }}/>

<motion.div  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}  transition={{ duration: 0.3, times: [0, 0.5, 1] }}/>

2. Anticipation

jsx

<motion.div  variants={{    idle: { y: 0, scaleY: 1 },    anticipate: { y: 10, scaleY: 0.9 },    jump: { y: -200 }  }}  initial="idle"  animate={["anticipate", "jump"]}  transition={{ duration: 0.5, times: [0, 0.2, 1] }}/>

<motion.div  variants={{    idle: { y: 0, scaleY: 1 },    anticipate: { y: 10, scaleY: 0.9 },    jump: { y: -200 }  }}  initial="idle"  animate={["anticipate", "jump"]}  transition={{ duration: 0.5, times: [0, 0.2, 1] }}/>

3. Staging

jsx

<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}

<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}

4. Straight Ahead / Pose to Pose

jsx

<motion.div  animate={{    x: [0, 100, 200, 300],    y: [0, -50, 0, -30]  }}  transition={{ duration: 1, ease: "easeInOut" }}/>

<motion.div  animate={{    x: [0, 100, 200, 300],    y: [0, -50, 0, -30]  }}  transition={{ duration: 1, ease: "easeInOut" }}/>

5. Follow Through and Overlapping Action

jsx

<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>  <motion.span    animate={{ x: 200 }}    transition={{ duration: 0.5, delay: 0.05 }} // hair  />  <motion.span    animate={{ x: 200 }}    transition={{ duration: 0.6, delay: 0.1 }} // cape  /></motion.div>

<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>  <motion.span    animate={{ x: 200 }}    transition={{ duration: 0.5, delay: 0.05 }} // hair  />  <motion.span    animate={{ x: 200 }}    transition={{ duration: 0.6, delay: 0.1 }} // cape  /></motion.div>

6. Slow In and Slow Out

jsx

<motion.div  animate={{ x: 300 }}  transition={{    duration: 0.6,    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier  }}/>// Or use: "easeIn", "easeOut", "easeInOut"

<motion.div  animate={{ x: 300 }}  transition={{    duration: 0.6,    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier  }}/>// Or use: "easeIn", "easeOut", "easeInOut"

7. Arc

jsx

<motion.div  animate={{    x: [0, 100, 200],    y: [0, -100, 0]  }}  transition={{ duration: 1, ease: "easeInOut" }}/>

<motion.div  animate={{    x: [0, 100, 200],    y: [0, -100, 0]  }}  transition={{ duration: 1, ease: "easeInOut" }}/>

8. Secondary Action

jsx

<motion.button  whileHover={{ scale: 1.05 }}  whileTap={{ scale: 0.95 }}>  <motion.span    animate={{ rotate: [0, 10, -10, 0] }}    transition={{ duration: 0.3 }}  >    Icon  </motion.span></motion.button>

<motion.button  whileHover={{ scale: 1.05 }}  whileTap={{ scale: 0.95 }}>  <motion.span    animate={{ rotate: [0, 10, -10, 0] }}    transition={{ duration: 0.3 }}  >    Icon  </motion.span></motion.button>

9. Timing

jsx

const timings = {  fast: { duration: 0.15 },  normal: { duration: 0.3 },  slow: { duration: 0.6 },  spring: { type: "spring", stiffness: 300, damping: 20 }};

const timings = {  fast: { duration: 0.15 },  normal: { duration: 0.3 },  slow: { duration: 0.6 },  spring: { type: "spring", stiffness: 300, damping: 20 }};

10. Exaggeration

jsx

<motion.div  animate={{ scale: 1.5, rotate: 720 }}  transition={{    type: "spring",    stiffness: 200,    damping: 10 // low damping = overshoot  }}/>

<motion.div  animate={{ scale: 1.5, rotate: 720 }}  transition={{    type: "spring",    stiffness: 200,    damping: 10 // low damping = overshoot  }}/>

11. Solid Drawing

jsx

<motion.div  style={{ perspective: 1000 }}  animate={{ rotateX: 45, rotateY: 30 }}  transition={{ duration: 0.5 }}/>

<motion.div  style={{ perspective: 1000 }}  animate={{ rotateX: 45, rotateY: 30 }}  transition={{ duration: 0.5 }}/>

12. Appeal

jsx

<motion.div  whileHover={{    scale: 1.02,    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"  }}  transition={{ duration: 0.3 }}/>

<motion.div  whileHover={{    scale: 1.02,    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"  }}  transition={{ duration: 0.3 }}/>

Stagger Children

jsx

const container = {  hidden: { opacity: 0 },  show: {    opacity: 1,    transition: { staggerChildren: 0.1 }  }};
<motion.ul variants={container} initial="hidden" animate="show">  {items.map(item => <motion.li variants={itemVariant} />)}</motion.ul>

const container = {  hidden: { opacity: 0 },  show: {    opacity: 1,    transition: { staggerChildren: 0.1 }  }};
<motion.ul variants={container} initial="hidden" animate="show">  {items.map(item => <motion.li variants={itemVariant} />)}</motion.ul>

Key Framer Motion Features

animate - Target state
variants - Named animation states
whileHover / whileTap - Gesture animations
transition - Timing and easing
AnimatePresence - Exit animations
useAnimation - Programmatic control
layout - Auto-animate layout changes

來源與署名

來源：dylantarre/animation-principles位於skills/09-by-tool-framework/framer-motion提交8359713

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Framer Motion

Framer Motion Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

Stagger Children

Key Framer Motion Features

來源與署名

更多來自 dylantarre/animation-principles 的技能

Lottie Bodymovin

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices