Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection
/mcp/sse
framework framework/gsap/index.md medium

framework-gsap-index

GSAP 动画库使用约定索引（原则 / 插件注册 / useGSAP / contextSafe / Timeline / ScrollTrigger / SplitText / FLIP / Draggable / Reduced Motion）

子项索引

子项 一句话
principles leaf GSAP 核心原则 — 单一引擎 / 集中管理 / GPU 友好 / 时长克制
plugin-registration leaf GSAP 插件注册纪律 — registerPlugin 集中在入口、先于动画执行；插件从 gsap/<Plugin> 直接 import
use-gsap-hook leaf useGSAP({ scope, dependencies }) hook 模板
context-safe leaf useGSAP 的 contextSafe — 点击/setTimeout/异步里建的动画不被 scope 自动清理，必须 contextSafe 包裹
timeline-organization leaf timeline 集中 animations/<feature>.ts — 组件只调用
scrolltrigger leaf ScrollTrigger 进视口触发与滚动驱动 — once 入场 vs scrub 联动、start/end、布局后 refresh、useGSAP 自动清理
split-text leaf SplitText 文字逐字/词/行入场 — 选拆分粒度、stagger 入场、必须 revert 清理、字体加载后再 split
flip-layout leaf Flip 插件 — 列表重排 / 模式切换的稳态动画
draggable leaf Draggable 插件 — 编辑器画布元素拖拽 / 自定义滑动控件，性能优于手写 mousemove handler
reduced-motion leaf prefers-reduced-motion 降级 — fade-only 或瞬时切换

GSAP · 动画库使用约定

本层包含

名称 类型 一句话
principles 叶子 单一引擎 / 集中管理 / GPU 友好 / 时长克制
plugin-registration 叶子 registerPlugin 集中注册一次、先于动画执行；插件直接 import 无需 token
use-gsap-hook 叶子 useGSAP hook 在 React 中的用法 + 清理
context-safe 叶子 事件回调 / 延迟动画用 contextSafe 包裹
timeline-organization 叶子 Timeline 编排 / 标签 / 嵌套子时间线
scrolltrigger 叶子 进视口入场 / 滚动驱动 / refresh
split-text 叶子 SplitText 文字逐字/词/行入场
flip-layout 叶子 FLIP 技术做布局过渡
draggable 叶子 Draggable 拖拽交互
reduced-motion 叶子 prefers-reduced-motion 兼容

何时下钻

  • 首次接触动画文件 → principles.md 打底
  • 首次引入某插件（ScrollTrigger/Flip/SplitText）→ plugin-registration.md
  • 在 React 组件里写动画 → use-gsap-hook.md
  • 点击 / 延迟 / async 后才触发的动画 → context-safe.md
  • 多步骤序列 / 复合动画 → timeline-organization.md
  • 滚到视口才入场 / 滚动驱动进度 → scrolltrigger.md
  • 标题/文案逐字逐行入场 → split-text.md
  • 列表重排 / 卡片位移过渡 → flip-layout.md
  • 拖拽 / 排序交互 → draggable.md
  • 无障碍 / 用户偏好减少动效 → reduced-motion.md

下钻决策表

任务 选哪个子项
首次接入 GSAP / 加新插件 principles + plugin-registration
写新的 *.animations.ts principles + use-gsap-hook + timeline-organization
区块滚到视口才淡入 scrolltrigger + use-gsap-hook
标题/Hero 文字逐行入场 split-text + plugin-registration
点击/悬停触发的交互动画 context-safe + use-gsap-hook
卡片网格重排过渡 flip-layout + principles
大纲步骤拖拽排序 draggable + use-gsap-hook
已有动画做无障碍兼容 reduced-motion

链接