重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
gsap-router by bbeierle12/skill-mcp-claude
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill gsap-router根据动画需求路由到 4 个专项技能。
| 需求 | 技能 | 信号 |
|---|---|---|
| 基础动画,缓动 | gsap-fundamentals | tween, animate, ease, from, to, duration, delay |
| 复杂序列 | gsap-sequencing | timeline, sequence, orchestrate, labels, callbacks |
| 滚动动画 | gsap-scrolltrigger |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| scroll, pin, scrub, parallax, reveal, sticky |
| React 集成 | gsap-react | React, useGSAP, ref, hook, cleanup, context |
gsap-fundamentals :
gsap-sequencing :
gsap-scrolltrigger :
gsap-react :
gsap-fundamentals 为基础进行路由gsap-fundamentals 开始gsap-fundamentals → 补间动画,缓动,基础属性
gsap-fundamentals → 动画原理,缓动
gsap-react → Hook 模式,清理,引用
gsap-scrolltrigger → 滚动触发器,固定
gsap-sequencing → 固定区域的时间线
gsap-fundamentals → 单个动画
gsap-fundamentals → 核心动画
gsap-sequencing → 复杂编排
gsap-react → 框架集成
gsap-scrolltrigger → 滚动交互(如果需要)
| 框架 | 动画类型 | 复杂度 | 路由到 |
|---|---|---|---|
| Vanilla JS | 简单 | 低 | fundamentals |
| Vanilla JS | 序列化 | 中 | fundamentals + sequencing |
| Vanilla JS | 基于滚动 | 中 | fundamentals + scrolltrigger |
| React | 简单 | 低 | fundamentals + react |
| React | 复杂 | 高 | 所有四个技能 |
| React | 滚动 | 中 | 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 |
r3f-fundamentals → 3D 场景设置
gsap-fundamentals → 对象属性动画
gsap-sequencing → 摄像机移动,场景过渡
GSAP 通过 onUpdate 为 Three.js 对象属性制作动画。
postfx-composer → 效果设置
gsap-fundamentals → 动画化效果参数
gsap-sequencing → 效果状态之间的过渡
GSAP 驱动效果强度、颜色等。
audio-playback → 音乐时序
gsap-sequencing → 将动画同步到音频提示
gsap-fundamentals → 音频响应的属性变化
时间线回调与音频事件同步。
particles-systems → 粒子发射器
gsap-fundamentals → 动画化发射器属性
gsap-sequencing → 粒子爆发序列
1. gsap-fundamentals → 理解补间动画,缓动
2. gsap-sequencing → 构建入场时间线
3. gsap-react → 与 React 集成(如果适用)
1. gsap-scrolltrigger → 设置触发器,固定
2. gsap-sequencing → 构建擦洗时间线
3. gsap-fundamentals → 单个动画属性
1. gsap-fundamentals → 悬停,点击动画
2. gsap-react → 事件处理程序,清理
3. gsap-sequencing → 复杂的交互序列
针对新年倒计时项目:
gsap-fundamentals → 数字动画,脉冲效果,缓动
gsap-sequencing → 倒计时序列,最终时刻编排
gsap-react → 组件集成,清理
关键动画:
| 任务 | 主要 | 次要 |
|---|---|---|
| "动画化这个元素" | fundamentals | - |
| "创建入场动画" | fundamentals | react |
| "构建页面过渡" | sequencing | fundamentals |
| "滚动时动画" | scrolltrigger | fundamentals |
| "React 组件动画" | react | fundamentals |
| "固定滚动区域" | scrolltrigger | sequencing |
| "复杂动画序列" | sequencing | fundamentals |
| "交错列表动画" | fundamentals | react |
| 感觉 | 缓动 |
|---|---|
| 敏捷的 UI | power2.out |
| 平滑入场 | power3.out |
| 俏皮弹跳 | back.out(1.7) |
| 弹簧感 | elastic.out |
| 球体掉落 | bounce.out |
| 线性/机械感 | none |
gsap-fundamentals 开始gsap-reactgsap-scrolltriggergsap-sequencinggsap-fundamentals 开始当性能至关重要时:
gsap-fundamentals — 使用变换,避免布局属性gsap-react — 正确清理以防止内存泄漏gsap-scrolltrigger — 明智使用 scrub,批量更新gsap-sequencing — 重用时间线,不要重新创建每周安装数
57
仓库
GitHub 星标数
7
首次出现
Jan 22, 2026
安全审计
安装于
opencode45
codex44
gemini-cli43
github-copilot41
cursor38
claude-code35
Routes to 4 specialized skills based on animation requirements.
| Need | Skill | Signals |
|---|---|---|
| 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 :
gsap-sequencing :
gsap-scrolltrigger :
gsap-react :
gsap-fundamentalsgsap-fundamentals → Tweens, easing, basic properties
gsap-fundamentals → Animation principles, easing
gsap-react → Hook patterns, cleanup, refs
gsap-scrolltrigger → Scroll triggers, pinning
gsap-sequencing → Timeline for pinned sections
gsap-fundamentals → Individual animations
gsap-fundamentals → Core animations
gsap-sequencing → Complex orchestration
gsap-react → Framework integration
gsap-scrolltrigger → Scroll interactions (if needed)
| Framework | Animation Type | Complexity | Route To |
|---|---|---|---|
| Vanilla JS | Simple | Low | fundamentals |
| Vanilla JS | Sequenced | Medium | fundamentals + sequencing |
| Vanilla JS | Scroll-based | Medium | fundamentals + scrolltrigger |
| React | Simple | Low | fundamentals + react |
| React | Complex | High | All four skills |
| React | Scroll | Medium | react + scrolltrigger |
| Animation Type | Primary Skill | Supporting Skill |
|---|---|---|
| Fade in/out | gsap-fundamentals | - |
| Slide/move | gsap-fundamentals | - |
| Scale/rotate | gsap-fundamentals | - |
| Stagger | gsap-fundamentals | - |
| Page transitions | gsap-sequencing | fundamentals |
r3f-fundamentals → 3D scene setup
gsap-fundamentals → Object property animation
gsap-sequencing → Camera movements, scene transitions
GSAP animates Three.js object properties via onUpdate.
postfx-composer → Effect setup
gsap-fundamentals → Animate effect parameters
gsap-sequencing → Transition between effect states
GSAP drives effect intensity, colors, etc.
audio-playback → Music timing
gsap-sequencing → Sync animations to audio cues
gsap-fundamentals → Audio-reactive property changes
Timeline callbacks sync with audio events.
particles-systems → Particle emitters
gsap-fundamentals → Animate emitter properties
gsap-sequencing → Particle burst sequences
1. gsap-fundamentals → Understand tweens, easing
2. gsap-sequencing → Build entrance timeline
3. gsap-react → Integrate with React (if applicable)
1. gsap-scrolltrigger → Set up triggers, pins
2. gsap-sequencing → Build scrubbed timelines
3. gsap-fundamentals → Individual animation properties
1. gsap-fundamentals → Hover, click animations
2. gsap-react → Event handlers, cleanup
3. gsap-sequencing → Complex interaction sequences
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:
| Task | Primary | Secondary |
|---|---|---|
| "Animate this element" | fundamentals | - |
| "Create entrance animation" | fundamentals | react |
| "Build page transition" | sequencing | fundamentals |
| "Animate on scroll" | scrolltrigger | fundamentals |
| "React component animation" | react | fundamentals |
| "Pinned scroll section" | scrolltrigger | sequencing |
| "Complex animation sequence" | sequencing | fundamentals |
| "Staggered list animation" | fundamentals | react |
| Feel | Ease |
|---|---|
| Snappy UI | power2.out |
| Smooth entrance | power3.out |
| Playful bounce | back.out(1.7) |
| Springy | elastic.out |
| Ball drop | bounce.out |
| Linear/mechanical | none |
gsap-fundamentalsgsap-react to combinationgsap-scrolltriggergsap-sequencinggsap-fundamentalsWhen performance is critical:
gsap-fundamentals — Use transforms, avoid layout propertiesgsap-react — Proper cleanup prevents memory leaksgsap-scrolltrigger — Use scrub wisely, batch updatesgsap-sequencing — Reuse timelines, don't recreateWeekly Installs
57
Repository
GitHub Stars
7
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode45
codex44
gemini-cli43
github-copilot41
cursor38
claude-code35
React视图过渡API使用指南:实现原生浏览器动画与状态管理
6,600 周安装
| 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 |