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