motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Animation Library

Motion动画库

Overview

概述

Motion (package:

motion

, formerly

framer-motion

) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Key Capabilities:

Gestures: drag, hover, tap, pan, focus with cross-device support
Scroll Animations: viewport-triggered, scroll-linked, parallax effects
Layout Animations: FLIP technique for smooth layout changes, shared element transitions
Spring Physics: Natural, customizable motion with physics-based easing
SVG: Path morphing, line drawing, attribute animation
Exit Animations: AnimatePresence for unmounting transitions
Performance: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB)

Production Tested: React 19, Next.js 15, Vite 6, Tailwind v4

Motion（包名：

motion

，前身为

framer-motion

）是行业标准的React动画库，已被数千个生产环境应用采用。它在GitHub上拥有30200+星标，还有300+官方示例，通过声明式API，只需少量代码就能创建复杂的动画效果。

核心功能：

手势交互：支持拖拽、悬停、点击、平移、聚焦，适配全设备
滚动动画：视口触发、滚动关联、视差效果
布局动画：采用FLIP技术实现流畅的布局变化、共享元素过渡
弹簧物理动画：基于物理缓动的自然、可定制动效
SVG动画：路径变形、描边动画、属性动画
退场动画：通过AnimatePresence实现组件卸载时的过渡效果
性能优化：硬件加速、ScrollTimeline API、包体积优化（2.3 KB - 34 KB）

生产环境验证兼容：React 19、Next.js 15、Vite 6、Tailwind v4

When to Use This Skill

何时使用该库

✅ Use Motion When:

✅ 推荐使用Motion的场景：

Complex Interactions:

Drag-and-drop interfaces (sortable lists, kanban boards, sliders)
Hover states with scale/rotation/color changes
Tap feedback with bounce/squeeze effects
Pan gestures for mobile-friendly controls

Scroll-Based Animations:

Hero sections with parallax layers
Scroll-triggered reveals (fade in as elements enter viewport)
Progress bars linked to scroll position
Sticky headers with scroll-dependent transforms

Layout Transitions:

Shared element transitions between routes (card → detail page)
Expand/collapse with automatic height animation
Grid/list view switching with smooth repositioning
Tab navigation with animated underline

Advanced Features:

SVG line drawing animations
Path morphing between shapes
Spring physics for natural bounce
Orchestrated sequences (staggered reveals)
Modal dialogs with backdrop blur

Bundle Optimization:

Need 2.3 KB animation library (useAnimate mini)
Want to reduce Motion from 34 KB to 4.6 KB (LazyMotion)

复杂交互场景:

拖拽交互界面（可排序列表、看板、滑块）
带缩放/旋转/颜色变化的悬停状态
带弹跳/挤压反馈的点击效果
移动端友好的平移手势控制

滚动相关动画:

带视差图层的Hero区域
滚动触发的元素渐显（元素进入视口时淡入）
与滚动位置关联的进度条
随滚动变化的粘性头部

布局过渡场景:

路由间的共享元素过渡（卡片→详情页）
自动高度动画的展开/收起效果
网格/列表视图切换时的流畅重定位
带动画下划线的标签导航

高级功能场景:

SVG描边动画
图形间的路径变形
自然弹跳的弹簧物理动画
编排式序列动画（ staggered 渐显）
带背景模糊的模态对话框

包体积优化场景:

需要仅2.3 KB的轻量动画库（使用useAnimate mini）
希望将Motion从34 KB压缩至4.6 KB（使用LazyMotion）

❌ Don't Use Motion When:

❌ 不推荐使用Motion的场景：

Simple list animations (use
```
auto-animate
```
instead: 3.28 KB vs 34 KB)
Static content without interactions
Cloudflare Workers (use
```
framer-motion
```
v12.23.24 workaround - see Known Issues)
3D animations (use Three.js or React Three Fiber instead)

简单列表动画（改用
```
auto-animate
```
：3.28 KB vs 34 KB）
无交互的静态内容
Cloudflare Workers环境（使用
```
framer-motion
```
v12.23.24版本解决，详见已知问题）
3D动画（改用Three.js或React Three Fiber）

Installation

安装

Latest Stable Version

or: npm install motion

或：npm install motion

or: yarn add motion

或：yarn add motion


**Current Version**: 12.23.24 (verified 2025-11-07)

**Alternative for Cloudflare Workers**:
```bash


**当前版本**: 12.23.24（验证于2025-11-07）

**Cloudflare Workers环境替代方案**:
```bash

Use framer-motion if deploying to Cloudflare Workers

部署到Cloudflare Workers时使用framer-motion

bun add framer-motion

or: npm install framer-motion

或：npm install framer-motion

undefined

undefined

Package Information

包信息

Bundle Size:
- Full
```
motion
```
  component: ~34 KB minified+gzipped
- ```
LazyMotion
```
  +
```
m
```
  component: ~4.6 KB
- ```
useAnimate
```
  mini: 2.3 KB (smallest React animation library)
- ```
useAnimate
```
  hybrid: 17 KB
Dependencies: React 18+ or React 19+
TypeScript: Native support included (no @types package needed)

包体积:
- 完整
```
motion
```
  组件：约34 KB（压缩+gzip后）
- ```
LazyMotion
```
  +
```
m
```
  组件：约4.6 KB
- ```
useAnimate
```
  mini：2.3 KB（最小的React动画库）
- ```
useAnimate
```
  hybrid：17 KB
依赖：React 18+ 或 React 19+
TypeScript：原生支持（无需额外安装@types包）

Core Concepts

核心概念

1. The

motion

Component

motion

组件

Transform any HTML/SVG element into an animatable component:

tsx

import { motion } from "motion/react"

// Basic animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Content fades in and slides up
</motion.div>

// Gesture controls
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  Click me
</motion.button>

Props:

```
initial
```
: Starting state (object or variant name)
```
animate
```
: Target state (object or variant name)
```
exit
```
: Unmounting state (requires AnimatePresence)
```
transition
```
: Timing/easing configuration
```
whileHover
```
,
```
whileTap
```
,
```
whileFocus
```
: Gesture states
```
whileInView
```
: Viewport-triggered animation
```
drag
```
: Enable dragging ("x", "y", or true for both)
```
layout
```
: Enable FLIP layout animations

可将任意HTML/SVG元素转换为可动画组件：

tsx

import { motion } from "motion/react"

// 基础动画
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  内容淡入并向上滑动
</motion.div>

// 手势控制
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  点击我
</motion.button>

属性说明:

```
initial
```
：初始状态（对象或变体名称）
```
animate
```
：目标状态（对象或变体名称）
```
exit
```
：卸载状态（需搭配AnimatePresence使用）
```
transition
```
：时长/缓动配置
```
whileHover
```
、
```
whileTap
```
、
```
whileFocus
```
：手势触发状态
```
whileInView
```
：视口触发的动画
```
drag
```
：启用拖拽（值可为"x"、"y"或true表示双向拖拽）
```
layout
```
：启用FLIP布局动画

2. Variants (Animation Orchestration)

2. 变体（动画编排）

Named animation states that propagate through component tree:

tsx

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.div variants={variants} initial="hidden" animate="visible">
  Content
</motion.div>

For advanced orchestration (staggerChildren, delayChildren, dynamic variants), load

references/core-concepts-deep-dive.md

命名的动画状态可在组件树中传播：

tsx

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.div variants={variants} initial="hidden" animate="visible">
  内容
</motion.div>

高级编排（staggerChildren、delayChildren、动态变体）请查看

references/core-concepts-deep-dive.md

。

3. AnimatePresence (Exit Animations)

3. AnimatePresence（退场动画）

Enables animations when components unmount:

tsx

import { AnimatePresence } from "motion/react"

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Modal content
    </motion.div>
  )}
</AnimatePresence>

Critical Rules:

AnimatePresence must stay mounted (don't wrap in conditional)
All children must have unique
key
props
AnimatePresence wraps the conditional, not the other way around

Common Mistake (exit animation won't play):

tsx

// ❌ Wrong - AnimatePresence unmounts with condition
{isVisible && (
  <AnimatePresence>
    <motion.div>Content</motion.div>
  </AnimatePresence>
)}

// ✅ Correct - AnimatePresence stays mounted
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

实现组件卸载时的动画效果：

tsx

import { AnimatePresence } from "motion/react"

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      模态框内容
    </motion.div>
  )}
</AnimatePresence>

关键规则:

AnimatePresence 必须保持挂载状态（不要用条件语句包裹）
所有子组件必须拥有唯一的
key
属性
AnimatePresence 要包裹条件语句，而不是反过来

常见错误（退场动画无法播放）:

tsx

// ❌ 错误写法 - AnimatePresence随条件语句卸载
{isVisible && (
  <AnimatePresence>
    <motion.div>内容</motion.div>
  </AnimatePresence>
)}

// ✅ 正确写法 - AnimatePresence保持挂载
<AnimatePresence>
  {isVisible && <motion.div key="unique">内容</motion.div>}
</AnimatePresence>

4. Layout Animations (FLIP)

4. 布局动画（FLIP）

Automatically animate layout changes:

tsx

<motion.div layout>
  {isExpanded ? <FullContent /> : <Summary />}
</motion.div>

Special props:

layoutId

(shared element transitions),

layoutScroll

(scrollable containers),

layoutRoot

(fixed positioning).

For advanced patterns (LayoutGroup, layoutId orchestration), load

references/core-concepts-deep-dive.md

自动为布局变化添加动画：

tsx

<motion.div layout>
  {isExpanded ? <FullContent /> : <Summary />}
</motion.div>

特殊属性：

layoutId

（共享元素过渡）、

layoutScroll

（可滚动容器）、

layoutRoot

（固定定位）。

高级模式（LayoutGroup、layoutId编排）请查看

references/core-concepts-deep-dive.md

。

5. Scroll Animations

5. 滚动动画

tsx

// Viewport-triggered
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
>
  Fades in when entering viewport
</motion.div>

// Scroll-linked (parallax)
import { useScroll, useTransform } from "motion/react"
const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -300])
<motion.div style={{ y }}>Parallax effect</motion.div>

For advanced scroll patterns (useScroll offsets, useTransform easing, parallax layers), load

references/core-concepts-deep-dive.md

tsx

// 视口触发
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
>
  进入视口时淡入
</motion.div>

// 滚动关联（视差）
import { useScroll, useTransform } from "motion/react"
const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -300])
<motion.div style={{ y }}>视差效果</motion.div>

高级滚动模式（useScroll偏移、useTransform缓动、视差图层）请查看

references/core-concepts-deep-dive.md

。

6. Gestures

6. 手势交互

tsx

<motion.div drag="x" dragConstraints={{ left: -200, right: 200 }}>
  Drag me
</motion.div>

Available:

whileHover

whileTap

whileFocus

whileDrag

whileInView

drag

For advanced drag controls (momentum, elastic, event handlers), load

references/core-concepts-deep-dive.md

tsx

<motion.div drag="x" dragConstraints={{ left: -200, right: 200 }}>
  拖拽我
</motion.div>

支持的手势：

whileHover

、

whileTap

、

whileFocus

、

whileDrag

、

whileInView

、

drag

。

高级拖拽控制（动量、弹性、事件处理）请查看

references/core-concepts-deep-dive.md

。

7. Spring Physics

7. 弹簧物理动画

tsx

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
/>

Common presets: Bouncy

{ stiffness: 300, damping: 10 }

, Smooth

{ stiffness: 100, damping: 20 }

For spring tuning (mass, visualizer, presets), load

references/core-concepts-deep-dive.md

tsx

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
/>

常用预设：弹跳效果

{ stiffness: 300, damping: 10 }

、平滑效果

{ stiffness: 100, damping: 20 }

。

弹簧参数调优（质量、可视化工具、预设）请查看

references/core-concepts-deep-dive.md

。

Integration Guides

集成指南

Vite:

bun add motion

→

import { motion } from "motion/react"

(works out of the box)

Next.js App Router: Requires

"use client"

directive or client component wrapper

tsx

"use client"
import { motion } from "motion/react"

Tailwind: ⚠️ Remove

transition-*

classes (causes conflicts with Motion animations)

Cloudflare Workers: Use

framer-motion

v12.23.24 instead (Motion has Wrangler build issues)

For complete integration guides (Next.js patterns, SSR, framework-specific issues), load

references/nextjs-integration.md

Vite：执行

bun add motion

→ 直接

import { motion } from "motion/react"

（开箱即用）

Next.js App Router：需要添加

"use client"

指令或使用客户端组件包装器

tsx

"use client"
import { motion } from "motion/react"

Tailwind：⚠️ 移除

transition-*

类（会与Motion动画冲突）

Cloudflare Workers：改用

framer-motion

v12.23.24版本（Motion存在Wrangler构建问题）

完整集成指南（Next.js模式、SSR、框架特定问题）请查看

references/nextjs-integration.md

。

Performance Optimization

性能优化

Bundle Size: Use LazyMotion (34 KB → 4.6 KB):

tsx

import { LazyMotion, domAnimation, m } from "motion/react"
<LazyMotion features={domAnimation}>
  <m.div>Only 4.6 KB!</m.div>
</LazyMotion>

Large Lists: Use virtualization (

react-window

react-virtuoso

) for 50+ animated items.

For complete optimization guide (hardware acceleration, memory profiling, production benchmarks), load

references/performance-optimization.md

包体积优化：使用LazyMotion（从34 KB → 4.6 KB）:

tsx

import { LazyMotion, domAnimation, m } from "motion/react"
<LazyMotion features={domAnimation}>
  <m.div>仅4.6 KB！</m.div>
</LazyMotion>

大型列表：使用虚拟化方案（

react-window

、

react-virtuoso

）处理50+个动画项。

完整性能优化指南（硬件加速、内存分析、生产环境基准测试）请查看

references/performance-optimization.md

。

Accessibility

无障碍支持

Respect
prefers-reduced-motion
:

tsx

import { MotionConfig } from "motion/react"
<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

Keyboard Support: Use

whileFocus

for keyboard-triggered animations.

tsx

<motion.button whileFocus={{ scale: 1.1 }} tabIndex={0}>
  Keyboard accessible
</motion.button>

For complete accessibility guide (ARIA patterns, screen readers, AnimatePresence workaround, testing), load

references/accessibility-guide.md

尊重
prefers-reduced-motion
设置:

tsx

import { MotionConfig } from "motion/react"
<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

键盘支持：使用

whileFocus

实现键盘触发的动画。

tsx

<motion.button whileFocus={{ scale: 1.1 }} tabIndex={0}>
  键盘可访问
</motion.button>

完整无障碍指南（ARIA模式、屏幕阅读器、AnimatePresence兼容方案、测试）请查看

references/accessibility-guide.md

。

Common Patterns

常见模式

Modal Dialog (AnimatePresence + backdrop):

tsx

<AnimatePresence>
  {isOpen && (
    <motion.dialog exit={{ opacity: 0 }}>Content</motion.dialog>
  )}
</AnimatePresence>

Accordion (height animation):

tsx

<motion.div animate={{ height: isOpen ? "auto" : 0 }}>
  Content
</motion.div>

For 15+ production patterns (carousel, tabs, scroll reveal, parallax, notifications), load

references/common-patterns.md

模态对话框（AnimatePresence + 背景）:

tsx

<AnimatePresence>
  {isOpen && (
    <motion.dialog exit={{ opacity: 0 }}>内容</motion.dialog>
  )}
</AnimatePresence>

折叠面板（高度动画）:

tsx

<motion.div animate={{ height: isOpen ? "auto" : 0 }}>
  内容
</motion.div>

15+生产环境模式（轮播、标签页、滚动渐显、视差、通知）请查看

references/common-patterns.md

。

Known Issues & Solutions

已知问题与解决方案

Issue 1: AnimatePresence Exit Not Working (MOST COMMON)

问题1：AnimatePresence退场动画不生效（最常见）

Symptom: Components disappear instantly without exit animation.

Solution: AnimatePresence must stay mounted, wrap the conditional (not be wrapped by it):

tsx

// ❌ Wrong
{isVisible && <AnimatePresence><motion.div>Content</motion.div></AnimatePresence>}

// ✅ Correct
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

症状：组件瞬间消失，无退场动画。

解决方案：AnimatePresence必须保持挂载，要包裹条件语句（而非被条件语句包裹）:

tsx

// ❌ 错误写法
{isVisible && <AnimatePresence><motion.div>内容</motion.div></AnimatePresence>}

// ✅ 正确写法
<AnimatePresence>
  {isVisible && <motion.div key="unique">内容</motion.div>}
</AnimatePresence>

Issue 2: Next.js "use client" Missing

问题2：Next.js缺失"use client"指令

Symptom: Build fails with "motion is not defined" or SSR errors.

Solution: Add

"use client"

directive:

tsx

"use client"
import { motion } from "motion/react"

症状：构建失败，提示"motion is not defined"或SSR错误。

解决方案：添加

"use client"

指令:

tsx

"use client"
import { motion } from "motion/react"

Issue 3: Tailwind Transitions Conflict

问题3：Tailwind过渡效果冲突

Symptom: Animations stutter or don't work.

Solution: Remove

transition-*

classes (Motion overrides CSS transitions):

tsx

// ❌ Wrong: <motion.div className="transition-all" animate={{ x: 100 }} />
// ✅ Correct: <motion.div animate={{ x: 100 }} />

症状：动画卡顿或不生效。

解决方案：移除

transition-*

类（Motion会覆盖CSS过渡）:

tsx

// ❌ 错误写法: <motion.div className="transition-all" animate={{ x: 100 }} />
// ✅ 正确写法: <motion.div animate={{ x: 100 }} />

Issue 4: Cloudflare Workers Build Errors

问题4：Cloudflare Workers构建错误

Symptom: Wrangler build fails when using

motion

package.

Solution: Use

framer-motion

v12.23.24 instead (GitHub issue #2918):

bash

bun add framer-motion  # Same API, works with Workers

症状：使用

motion

包时Wrangler构建失败。

解决方案：改用

framer-motion

v12.23.24版本（GitHub issue #2918）:

bash

bun add framer-motion  # API相同，可在Workers中正常使用

Issue 5: Large List Performance

问题5：大型列表性能问题

Symptom: 50-100+ animated items cause severe slowdown.

Solution: Use virtualization (

react-window

react-virtuoso

For 5+ additional issues (layoutScroll, layoutRoot, AnimatePresence + layoutId), load

references/nextjs-integration.md

references/core-concepts-deep-dive.md

症状：50-100+个动画项导致严重卡顿。

解决方案：使用虚拟化方案（

react-window

、

react-virtuoso

）。

更多5+问题（layoutScroll、layoutRoot、AnimatePresence + layoutId）请查看

references/nextjs-integration.md

或

references/core-concepts-deep-dive.md

。

When to Load References

何时查阅参考文档

Claude should load these references based on user needs:

根据用户需求，Claude会加载以下参考文档：

Load

references/core-concepts-deep-dive.md

when:

当用户有以下需求时，加载

references/core-concepts-deep-dive.md

User asks about variants orchestration (staggerChildren, delayChildren, dynamic variants)
User needs advanced layout animations (layoutId shared transitions, LayoutGroup)
User wants scroll-linked animations (useScroll offsets, useTransform easing, parallax layers)
User needs complex drag patterns (momentum, elastic, event handlers, constraints)
User asks about spring physics tuning (mass parameter, visualizer, custom presets)

询问变体编排（staggerChildren、delayChildren、动态变体）
需要高级布局动画（layoutId共享过渡、LayoutGroup）
希望实现滚动关联动画（useScroll偏移、useTransform缓动、视差图层）
需要复杂拖拽模式（动量、弹性、事件处理、约束）
询问弹簧物理参数调优（质量参数、可视化工具、自定义预设）

Load

references/performance-optimization.md

when:

当用户有以下需求时，加载

references/performance-optimization.md

User wants to reduce bundle size below 4.6 KB (useAnimate mini, LazyMotion comparison)
User mentions "app is slow", "janky animations", "laggy", or "performance issues"
User has 50+ animated items in a list (virtualization needed)
User needs memory profiling or production benchmarks

希望将包体积压缩至4.6 KB以下（useAnimate mini、LazyMotion对比）
提到"应用卡顿"、"动画不流畅"、"延迟"或"性能问题"
列表中有50+个动画项（需要虚拟化）
需要内存分析或生产环境基准测试

Load

references/nextjs-integration.md

when:

当用户有以下需求时，加载

references/nextjs-integration.md

User is building with Next.js (App Router or Pages Router)
User encounters SSR errors, "use client" errors, or hydration issues
User asks about route transitions or page navigation animations
User needs Next.js-specific workarounds (Reorder component, AnimatePresence soft navigation)

使用Next.js开发（App Router或Pages Router）
遇到SSR错误、"use client"错误或 hydration 问题
询问路由过渡或页面导航动画
需要Next.js特定兼容方案（Reorder组件、AnimatePresence软导航）

Load

references/accessibility-guide.md

when:

当用户有以下需求时，加载

references/accessibility-guide.md

User asks about "prefers-reduced-motion" or accessibility compliance
User needs ARIA integration patterns (roles, labels, announcements)
User wants screen reader compatibility
User mentions accessibility audits or WCAG compliance
User asks about AnimatePresence reducedMotion workaround (known issue #1567)

询问"prefers-reduced-motion"或无障碍合规性
需要ARIA集成模式（角色、标签、通知）
希望实现屏幕阅读器兼容
提到无障碍审计或WCAG合规
询问AnimatePresence的reducedMotion兼容方案（已知问题#1567）

Load

references/common-patterns.md

when:

当用户有以下需求时，加载

references/common-patterns.md

User asks for specific UI patterns (modal, accordion, carousel, tabs, dropdown, toast, etc.)
User needs copy-paste code examples for production use
User wants to see 15+ real-world animation patterns

询问特定UI模式（模态框、折叠面板、轮播、标签页、下拉菜单、提示框等）
需要可直接复制使用的生产环境代码示例
希望查看15+真实世界动画模式

Load

references/motion-vs-auto-animate.md

when:

当用户有以下需求时，加载

references/motion-vs-auto-animate.md

User is deciding between Motion and AutoAnimate libraries
User mentions "simple list animations" or "bundle size concerns"
User asks "which animation library should I use?" or "is Motion overkill?"
User needs feature comparison or decision matrix

在Motion和AutoAnimate库之间做选择
提到"简单列表动画"或"包体积顾虑"
询问"应该使用哪个动画库？"或"Motion是否过于笨重？"
需要功能对比或决策矩阵

Templates

模板

This skill includes 5 production-ready templates in the

templates/

directory:

motion-vite-basic.tsx - Basic Vite + React + TypeScript setup with common animations
motion-nextjs-client.tsx - Next.js App Router pattern with client component wrapper
scroll-parallax.tsx - Scroll animations, parallax, and viewport triggers
ui-components.tsx - Modal, accordion, carousel, tabs with shared underline
layout-transitions.tsx - FLIP layout animations and shared element transitions

Copy templates into your project and customize as needed.

本技能在

templates/

目录中包含5个生产环境可用的模板：

motion-vite-basic.tsx - 基础Vite + React + TypeScript配置，包含常见动画
motion-nextjs-client.tsx - Next.js App Router模式，带客户端组件包装器
scroll-parallax.tsx - 滚动动画、视差效果和视口触发
ui-components.tsx - 模态框、折叠面板、轮播、标签页（带共享下划线）
layout-transitions.tsx - FLIP布局动画和共享元素过渡

可将模板复制到项目中并按需定制。

References

参考文档

This skill includes 4 comprehensive reference guides:

motion-vs-auto-animate.md - Decision guide: when to use Motion vs AutoAnimate
performance-optimization.md - Bundle size, LazyMotion, virtualization, hardware acceleration
nextjs-integration.md - App Router vs Pages Router, "use client", known issues
common-patterns.md - Top 15 patterns with full code examples

See

references/

directory for detailed guides.

本技能包含4份全面的参考指南：

motion-vs-auto-animate.md - 决策指南：何时使用Motion vs AutoAnimate
performance-optimization.md - 包体积优化、LazyMotion、虚拟化、硬件加速
nextjs-integration.md - App Router vs Pages Router、"use client"、已知问题
common-patterns.md - 15+热门模式，附完整代码示例

详细指南请查看

references/

目录。

Scripts

脚本

This skill includes 2 automation scripts:

init-motion.sh - One-command setup with framework detection (Vite, Next.js, Cloudflare Workers)
optimize-bundle.sh - Convert existing Motion code to LazyMotion for smaller bundle

See

scripts/

directory for automation tools.

本技能包含2个自动化脚本：

init-motion.sh - 一键安装脚本，自动检测框架（Vite、Next.js、Cloudflare Workers）
optimize-bundle.sh - 将现有Motion代码转换为LazyMotion，减小包体积

自动化工具请查看

scripts/

目录。

Official Documentation

官方文档

Official Site: https://motion.dev
GitHub: https://github.com/motiondivision/motion (30,200+ stars)
Examples: https://motion.dev/examples (300+ examples)

Related Skills:

auto-animate

(simple lists),

tailwind-v4-shadcn

(styling),

nextjs

(App Router),

cloudflare-worker-base

Motion vs AutoAnimate: Load

references/motion-vs-auto-animate.md

for detailed comparison.

官方网站: https://motion.dev
GitHub: https://github.com/motiondivision/motion（30200+星标）
示例: https://motion.dev/examples（300+示例）

相关技能:

auto-animate

（简单列表）、

tailwind-v4-shadcn

（样式）、

nextjs

（App Router）、

cloudflare-worker-base

Motion vs AutoAnimate: 详细对比请查看

references/motion-vs-auto-animate.md

。

Token Efficiency Metrics

令牌效率指标

Token Savings: ~83% (30k → 5k tokens) | Error Prevention: 100% (29+ errors) | Time Savings: ~85% (2-3 hrs → 20-30 min)

令牌节省: ~83%（30k → 5k令牌） | 错误预防: 100%（29+错误） | 时间节省: ~85%（2-3小时 → 20-30分钟）

Package Versions (Verified 2025-11-07)

包版本（验证于2025-11-07）

Package	Version	Status
motion	12.23.24	✅ Latest stable
framer-motion	12.23.24	✅ Alternative for Cloudflare
react	19.2.0	✅ Latest stable
vite	6.0.0	✅ Latest stable

包名	版本	状态
motion	12.23.24	✅ 最新稳定版
framer-motion	12.23.24	✅ Cloudflare环境替代方案
react	19.2.0	✅ 最新稳定版
vite	6.0.0	✅ 最新稳定版

Contributing

贡献

Found an issue or have a suggestion?

Open an issue: https://github.com/secondsky/claude-skills/issues
See templates and references for detailed examples

Production Tested: ✅ React 19 + Next.js 15 + Vite 6 + Tailwind v4 Token Savings: ~83% Error Prevention: 100% (29+ documented errors prevented) Bundle Size: 2.3 KB (mini) - 34 KB (full), optimizable to 4.6 KB with LazyMotion Accessibility: MotionConfig reducedMotion support Ready to use! Install with

./scripts/install-skill.sh motion

发现问题或有建议？

提交Issue: https://github.com/secondsky/claude-skills/issues
查看模板和参考文档获取详细示例

生产环境验证: ✅ React 19 + Next.js 15 + Vite 6 + Tailwind v4 令牌节省: ~83% 错误预防: 100%（避免29+已记录的错误） 包体积: 2.3 KB（mini版）- 34 KB（完整版），使用LazyMotion可优化至4.6 KB 无障碍支持: MotionConfig支持reducedMotion设置 随时可用! 执行

./scripts/install-skill.sh motion

安装

motion

Original

Translation

Motion Animation Library

Motion动画库

Overview

概述

When to Use This Skill

何时使用该库

✅ Use Motion When:

✅ 推荐使用Motion的场景：

❌ Don't Use Motion When:

❌ 不推荐使用Motion的场景：

Installation

安装

Latest Stable Version

最新稳定版本

or: npm install motion

或：npm install motion

or: yarn add motion

或：yarn add motion

Use framer-motion if deploying to Cloudflare Workers

部署到Cloudflare Workers时使用framer-motion

or: npm install framer-motion

或：npm install framer-motion

Package Information

包信息

Core Concepts

核心概念

1. The motion Component

1. motion组件

2. Variants (Animation Orchestration)

2. 变体（动画编排）

3. AnimatePresence (Exit Animations)

3. AnimatePresence（退场动画）

4. Layout Animations (FLIP)

4. 布局动画（FLIP）

5. Scroll Animations

5. 滚动动画

6. Gestures

6. 手势交互

7. Spring Physics

7. 弹簧物理动画

Integration Guides

集成指南

Performance Optimization

性能优化

Accessibility

无障碍支持

Common Patterns

常见模式

Known Issues & Solutions

已知问题与解决方案

Issue 1: AnimatePresence Exit Not Working (MOST COMMON)

问题1：AnimatePresence退场动画不生效（最常见）

Issue 2: Next.js "use client" Missing

问题2：Next.js缺失"use client"指令

Issue 3: Tailwind Transitions Conflict

问题3：Tailwind过渡效果冲突

Issue 4: Cloudflare Workers Build Errors

问题4：Cloudflare Workers构建错误

Issue 5: Large List Performance

问题5：大型列表性能问题

When to Load References

何时查阅参考文档

Load references/core-concepts-deep-dive.md when:

当用户有以下需求时，加载references/core-concepts-deep-dive.md:

Load references/performance-optimization.md when:

当用户有以下需求时，加载references/performance-optimization.md:

Load references/nextjs-integration.md when:

当用户有以下需求时，加载references/nextjs-integration.md:

Load references/accessibility-guide.md when:

当用户有以下需求时，加载references/accessibility-guide.md:

Load references/common-patterns.md when:

当用户有以下需求时，加载references/common-patterns.md:

Load references/motion-vs-auto-animate.md when:

当用户有以下需求时，加载references/motion-vs-auto-animate.md:

Templates

模板

References

1. The
`motion`
Component

1.
`motion`
组件

Load
`references/core-concepts-deep-dive.md`
when:

当用户有以下需求时，加载
`references/core-concepts-deep-dive.md`
:

Load
`references/performance-optimization.md`
when:

当用户有以下需求时，加载
`references/performance-optimization.md`
:

Load
`references/nextjs-integration.md`
when:

当用户有以下需求时，加载
`references/nextjs-integration.md`
:

Load
`references/accessibility-guide.md`
when:

当用户有以下需求时，加载
`references/accessibility-guide.md`
:

Load
`references/common-patterns.md`
when:

当用户有以下需求时，加载
`references/common-patterns.md`
:

Load
`references/motion-vs-auto-animate.md`
when:

当用户有以下需求时，加载
`references/motion-vs-auto-animate.md`
: