Back to Details

gsap-router

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

GSAP Router

GSAP 路由工具

Routes to 4 specialized skills based on animation requirements.
根据动画需求路由到4个专业技能模块。

Routing Protocol

路由规则

  1. Classify — Identify animation type from user request
  2. Match — Apply signal matching rules below
  3. Combine — Production animations often need 2-3 skills together
  4. Load — Read matched SKILL.md files before implementation
  1. 分类 — 从用户需求中识别动画类型
  2. 匹配 — 应用下方的信号匹配规则
  3. 组合 — 生产环境中的动画通常需要结合2-3个技能模块
  4. 加载 — 实现前先读取匹配到的SKILL.md文件

Quick Route

快速路由

Tier 1: Core (Start Here)

第一层级：核心模块（从这里开始）

NeedSkillSignals
Basic animations, easing
gsap-fundamentals
tween, animate, ease, from, to, duration, delay
Complex sequences
gsap-sequencing
timeline, sequence, orchestrate, labels, callbacks
Scroll animations
gsap-scrolltrigger
scroll, pin, scrub, parallax, reveal, sticky
React integration
gsap-react
React, useGSAP, ref, hook, cleanup, context
需求技能信号
基础动画、缓动效果
gsap-fundamentals
tween, animate, ease, from, to, duration, delay
复杂序列动画
gsap-sequencing
timeline, sequence, orchestrate, labels, callbacks
滚动触发动画
gsap-scrolltrigger
scroll, pin, scrub, parallax, reveal, sticky
React集成动画
gsap-react
React, useGSAP, ref, hook, cleanup, context

Signal Matching

信号匹配

Primary Signals

主要信号

gsap-fundamentals:
  • "animate", "tween", "transition"
  • "ease", "easing", "timing"
  • "from", "to", "fromTo"
  • "duration", "delay", "repeat"
  • "stagger", "properties"
gsap-sequencing:
  • "timeline", "sequence", "orchestrate"
  • "labels", "callbacks", "nested"
  • "position parameter", "overlap"
  • "complex animation", "choreography"
  • "play", "pause", "reverse", "seek"
gsap-scrolltrigger:
  • "scroll", "ScrollTrigger"
  • "pin", "sticky", "fixed"
  • "scrub", "parallax"
  • "reveal on scroll", "snap"
  • "progress indicator"
gsap-react:
  • "React", "component"
  • "useGSAP", "useRef", "hook"
  • "cleanup", "context"
  • "event handler", "state"
gsap-fundamentals:
  • "animate", "tween", "transition"
  • "ease", "easing", "timing"
  • "from", "to", "fromTo"
  • "duration", "delay", "repeat"
  • "stagger", "properties"
gsap-sequencing:
  • "timeline", "sequence", "orchestrate"
  • "labels", "callbacks", "nested"
  • "position parameter", "overlap"
  • "complex animation", "choreography"
  • "play", "pause", "reverse", "seek"
gsap-scrolltrigger:
  • "scroll", "ScrollTrigger"
  • "pin", "sticky", "fixed"
  • "scrub", "parallax"
  • "reveal on scroll", "snap"
  • "progress indicator"
gsap-react:
  • "React", "component"
  • "useGSAP", "useRef", "hook"
  • "cleanup", "context"
  • "event handler", "state"

Confidence Scoring

置信度评分

  • High (3+ signals) — Route directly to matched skill
  • Medium (1-2 signals) — Route with fundamentals as foundation
  • Low (0 signals) — Start with 
    gsap-fundamentals
  • 高置信度（3个及以上信号） — 直接路由到匹配的技能模块
  • 中置信度（1-2个信号） — 以基础模块为核心进行路由
  • 低置信度（0个信号） — 从
    gsap-fundamentals
    开始

Common Combinations

常见组合

Basic Animation (1 skill)

基础动画（1个技能模块）

gsap-fundamentals → Tweens, easing, basic properties
gsap-fundamentals → Tweens, easing, basic properties

React Component Animation (2 skills)

React组件动画（2个技能模块）

gsap-fundamentals → Animation principles, easing
gsap-react → Hook patterns, cleanup, refs
gsap-fundamentals → Animation principles, easing
gsap-react → Hook patterns, cleanup, refs

Scroll-Based Experience (3 skills)

基于滚动的交互体验（3个技能模块）

gsap-scrolltrigger → Scroll triggers, pinning
gsap-sequencing → Timeline for pinned sections
gsap-fundamentals → Individual animations
gsap-scrolltrigger → Scroll triggers, pinning
gsap-sequencing → Timeline for pinned sections
gsap-fundamentals → Individual animations

Full Production (3-4 skills)

全生产环境动画（3-4个技能模块）

gsap-fundamentals → Core animations
gsap-sequencing → Complex orchestration
gsap-react → Framework integration
gsap-scrolltrigger → Scroll interactions (if needed)
gsap-fundamentals → Core animations
gsap-sequencing → Complex orchestration
gsap-react → Framework integration
gsap-scrolltrigger → Scroll interactions (if needed)

Decision Table

决策表

FrameworkAnimation TypeComplexityRoute To
Vanilla JSSimpleLowfundamentals
Vanilla JSSequencedMediumfundamentals + sequencing
Vanilla JSScroll-basedMediumfundamentals + scrolltrigger
ReactSimpleLowfundamentals + react
ReactComplexHighAll four skills
ReactScrollMediumreact + scrolltrigger
框架动画类型复杂度路由目标
Vanilla JS简单动画低fundamentals
Vanilla JS序列动画中fundamentals + sequencing
Vanilla JS滚动触发动画中fundamentals + scrolltrigger
React简单动画低fundamentals + react
React复杂动画高全部四个技能模块
React滚动动画中react + scrolltrigger

Animation Categories

动画分类

Motion Type → Skill Mapping

动画类型 → 技能映射

Animation TypePrimary SkillSupporting Skill
Fade in/out
gsap-fundamentals
-
Slide/move
gsap-fundamentals
-
Scale/rotate
gsap-fundamentals
-
Stagger
gsap-fundamentals
-
Page transitions
gsap-sequencing
fundamentals
Orchestrated reveals
gsap-sequencing
fundamentals
Scroll reveals
gsap-scrolltrigger
fundamentals
Parallax
gsap-scrolltrigger
-
Pinned sections
gsap-scrolltrigger
sequencing
React animations
gsap-react
fundamentals
React + scroll
gsap-react
scrolltrigger
动画类型核心技能模块辅助技能模块
淡入/淡出
gsap-fundamentals
-
滑动/移动
gsap-fundamentals
-
缩放/旋转
gsap-fundamentals
-
交错动画
gsap-fundamentals
-
页面过渡
gsap-sequencing
fundamentals
协同展示动画
gsap-sequencing
fundamentals
滚动展示动画
gsap-scrolltrigger
fundamentals
视差动画
gsap-scrolltrigger
-
固定滚动区块
gsap-scrolltrigger
sequencing
React动画
gsap-react
fundamentals
React + 滚动动画
gsap-react
scrolltrigger

Integration with Other Domains

与其他领域的集成

With R3F (r3f-*)

与R3F集成（r3f-*）

r3f-fundamentals → 3D scene setup
gsap-fundamentals → Object property animation
gsap-sequencing → Camera movements, scene transitions
GSAP animates Three.js object properties via 
onUpdate
.
r3f-fundamentals → 3D scene setup
gsap-fundamentals → Object property animation
gsap-sequencing → Camera movements, scene transitions
GSAP通过
onUpdate
方法为Three.js对象的属性添加动画。

With Post-Processing (postfx-*)

与后期处理集成（postfx-*）

postfx-composer → Effect setup
gsap-fundamentals → Animate effect parameters
gsap-sequencing → Transition between effect states
GSAP drives effect intensity, colors, etc.
postfx-composer → Effect setup
gsap-fundamentals → Animate effect parameters
gsap-sequencing → Transition between effect states
GSAP驱动特效的强度、颜色等参数变化。

With Audio (audio-*)

与音频集成（audio-*）

audio-playback → Music timing
gsap-sequencing → Sync animations to audio cues
gsap-fundamentals → Audio-reactive property changes
Timeline callbacks sync with audio events.
audio-playback → Music timing
gsap-sequencing → Sync animations to audio cues
gsap-fundamentals → Audio-reactive property changes
时间线回调与音频事件同步。

With Particles (particles-*)

与粒子系统集成（particles-*）

particles-systems → Particle emitters
gsap-fundamentals → Animate emitter properties
gsap-sequencing → Particle burst sequences
particles-systems → Particle emitters
gsap-fundamentals → Animate emitter properties
gsap-sequencing → Particle burst sequences

Workflow Patterns

工作流模式

Page Load Animation

页面加载动画

1. gsap-fundamentals → Understand tweens, easing
2. gsap-sequencing → Build entrance timeline
3. gsap-react → Integrate with React (if applicable)
1. gsap-fundamentals → 理解补间动画、缓动效果
2. gsap-sequencing → 构建入场时间线
3. gsap-react → 与React集成（如适用）

Scroll Experience

滚动交互体验

1. gsap-scrolltrigger → Set up triggers, pins
2. gsap-sequencing → Build scrubbed timelines
3. gsap-fundamentals → Individual animation properties
1. gsap-scrolltrigger → 设置触发器、固定元素
2. gsap-sequencing → 构建可 scrub 的时间线
3. gsap-fundamentals → 配置单个动画属性

Interactive UI

交互式UI动画

1. gsap-fundamentals → Hover, click animations
2. gsap-react → Event handlers, cleanup
3. gsap-sequencing → Complex interaction sequences
1. gsap-fundamentals → 悬停、点击动画
2. gsap-react → 事件处理、资源清理
3. gsap-sequencing → 复杂交互序列

Temporal Collapse Stack

倒计时项目示例栈

For the New Year countdown project:
gsap-fundamentals → Digit animations, pulse effects, easing
gsap-sequencing → Countdown sequence, final moment orchestration
gsap-react → Component integration, cleanup
Key animations:
  • Digit flip on time change
  • Pulse/glow intensity over time
  • Final countdown dramatic sequence
  • Celebration reveal at zero
针对新年倒计时项目：
gsap-fundamentals → Digit animations, pulse effects, easing
gsap-sequencing → Countdown sequence, final moment orchestration
gsap-react → Component integration, cleanup
核心动画：
  • 时间变化时的数字翻转效果
  • 随时间变化的脉冲/发光强度
  • 倒计时最后阶段的戏剧性序列
  • 归零后的庆祝展示动画

Quick Reference

快速参考

Task → Skills

任务 → 技能模块

TaskPrimarySecondary
"Animate this element"fundamentals-
"Create entrance animation"fundamentalsreact
"Build page transition"sequencingfundamentals
"Animate on scroll"scrolltriggerfundamentals
"React component animation"reactfundamentals
"Pinned scroll section"scrolltriggersequencing
"Complex animation sequence"sequencingfundamentals
"Staggered list animation"fundamentalsreact
任务核心模块辅助模块
"为这个元素添加动画"fundamentals-
"创建入场动画"fundamentalsreact
"构建页面过渡效果"sequencingfundamentals
"实现滚动触发动画"scrolltriggerfundamentals
"React组件动画"reactfundamentals
"固定滚动区块"scrolltriggersequencing
"复杂动画序列"sequencingfundamentals
"列表交错动画"fundamentalsreact

Easing Quick Reference

缓动函数快速参考

FeelEase
Snappy UI
power2.out
Smooth entrance
power3.out
Playful bounce
back.out(1.7)
Springy
elastic.out
Ball drop
bounce.out
Linear/mechanical
none
效果感受缓动函数
灵敏UI
power2.out
平滑入场
power3.out
趣味弹跳
back.out(1.7)
弹性效果
elastic.out
落体弹跳
bounce.out
线性/机械感
none

Fallback Behavior

回退规则

  • No framework stated → Assume vanilla JS, start with 
    gsap-fundamentals
  • React mentioned → Add 
    gsap-react
    to combination
  • Scroll mentioned → Add 
    gsap-scrolltrigger
  • "Complex" or "sequence" → Add 
    gsap-sequencing
  • Unclear requirements → Start with 
    gsap-fundamentals
  • 未指定框架 → 默认为Vanilla JS，从
    gsap-fundamentals
    开始
  • 提到React → 在组合中加入
    gsap-react
  • 提到滚动 → 在组合中加入
    gsap-scrolltrigger
  • 提到“复杂”或“序列” → 在组合中加入
    gsap-sequencing
  • 需求不明确 → 从
    gsap-fundamentals
    开始

Performance Priority

性能优化要点

When performance is critical:
  1. gsap-fundamentals
    — Use transforms, avoid layout properties
  2. gsap-react
    — Proper cleanup prevents memory leaks
  3. gsap-scrolltrigger
    — Use 
    scrub
    wisely, batch updates
  4. gsap-sequencing
    — Reuse timelines, don't recreate
当性能要求较高时：
  1. gsap-fundamentals
    — 使用transform属性，避免影响布局的属性
  2. gsap-react
    — 正确的资源清理避免内存泄漏
  3. gsap-scrolltrigger
    — 合理使用
    scrub
    ，批量更新
  4. gsap-sequencing
    — 复用时间线，避免重复创建