SKILL30Motion
Engineering GSAP Animations
Implements selected GSAP effects as scoped, lifecycle-safe, responsive, and verifiable React or Next.js subsystems.
Primary benefit
Delivers reliable GSAP animation that survives resizing, route changes, repeated mounting, and accessibility preferences.When to use
Use when GSAP has been selected for React or Next.js animation, especially timelines, ScrollTrigger, pinning, scrub, SplitText, Flip, SVG, responsive animation, plugin lifecycle, cleanup, or animation-related integration bugs.
When not to use
Do not use when the animation technology or motion direction is still undecided, or when runtime profiling is the main problem.
Use cases
Build a scoped React timeline with correct cleanup
Repair responsive ScrollTrigger pinning and lifecycle behavior
Example prompts
Use engineering-gsap-animations to implement this selected GSAP timeline with correct React lifecycle and reduced-motion behavior.Install this skill
Choose the command for your operating system and run it from the repository root.
Bash
./install.sh --skill engineering-gsap-animationsPowerShell
./install.ps1 --skill engineering-gsap-animationsChatGPT
Download Skill ZIPCompatibility
- Surfaces
- ChatGPT · Codex · Claude Code
- Operating systems
- Linux · macOS · Windows
- Install modes
- PluginFilesystem
Dependencies
Part of systems
Curated systems that canonically include this method.
Used in evidence
Reports that explicitly list this method among the applied methods.