Setup & Installation
What This Skill Does
Covers GSAP animation setup in React and Next.js using the useGSAP hook, gsap.context(), and ref-based targeting. Handles cleanup on unmount, scoped selectors, context-safe callbacks, and SSR safety. Works with the broader GSAP ecosystem including ScrollTrigger and timelines.
Using useGSAP instead of raw useEffect eliminates manual ctx.revert() calls and prevents the animation leaks and stale-node warnings that come from skipping cleanup.
When to use it
- Animating components on mount with automatic cleanup when they unmount
- Scoping GSAP selectors to a single component so they don't match DOM outside it
- Wrapping click handlers in contextSafe so animations stop firing after unmount
- Running GSAP animations in Next.js without triggering errors during server render
- Managing timeline cleanup across re-renders using revertOnUpdate
Similar Skills
ios-application-dev
A reference guide for building iOS apps with UIKit, SnapKit, and SwiftUI.
fullstack-dev
A workflow guide for building full-stack applications, covering backend architecture, frontend-backend integration, auth, real-time features, and production hardening.
android-native-dev
A reference guide for Android native development covering Kotlin/Compose patterns, Material Design 3 specs, Gradle project setup, and build troubleshooting.
frontend-dev
Builds complete frontend pages by combining UI design, scroll animations, AI-generated media assets, and copywriting into a single workflow.