login
Bbeierle12

gsap-router

by @Bbeierle12 in AI & LLM
4
0
# Install this skill:
npx skills add Bbeierle12/Skill-MCP-Claude --skill "gsap-router"

Install specific skill from multi-skill repository

# Description

Router for GSAP animation domain. Use when implementing animations with GreenSock Animation Platform including tweens, timelines, scroll-based animations, or React integration. Routes to 4 specialized skills for fundamentals, sequencing, ScrollTrigger, and React patterns.

# SKILL.md

name: gsap-router
description: Router for GSAP animation domain. Use when implementing animations with GreenSock Animation Platform including tweens, timelines, scroll-based animations, or React integration. Routes to 4 specialized skills for fundamentals, sequencing, ScrollTrigger, and React patterns.

GSAP Router

Routes to 4 specialized skills based on animation requirements.

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

Quick Route

Tier 1: Core (Start Here)

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

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"

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

Common Combinations

Basic Animation (1 skill)

gsap-fundamentals β†’ Tweens, easing, basic properties

React Component Animation (2 skills)

gsap-fundamentals β†’ Animation principles, easing
gsap-react β†’ Hook patterns, cleanup, refs

Scroll-Based Experience (3 skills)

gsap-scrolltrigger β†’ Scroll triggers, pinning
gsap-sequencing β†’ Timeline for pinned sections
gsap-fundamentals β†’ Individual animations

Full Production (3-4 skills)

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

Decision Table

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 Categories

Motion Type β†’ Skill Mapping

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
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

Integration with Other Domains

With 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.

With Post-Processing (postfx-*)

postfx-composer β†’ Effect setup
gsap-fundamentals β†’ Animate effect parameters
gsap-sequencing β†’ Transition between effect states

GSAP drives effect intensity, colors, etc.

With 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.

With Particles (particles-*)

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)

Scroll Experience

1. gsap-scrolltrigger β†’ Set up triggers, pins
2. gsap-sequencing β†’ Build scrubbed timelines
3. gsap-fundamentals β†’ Individual animation properties

Interactive UI

1. gsap-fundamentals β†’ Hover, click animations
2. gsap-react β†’ Event handlers, cleanup
3. gsap-sequencing β†’ Complex interaction sequences

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

Quick Reference

Task β†’ Skills

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

Easing Quick Reference

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

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

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

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.