skills.rest
Bharathadi01
Bharathadi01COMMUNITY
Explore all skills by this author →
GitHub

gsap-react

Orchestrate GSAP animations in React components with useGSAP and scoped refs.

Updated Apr 12, 2026
Search Tags:#react#cleanup#animations#gsap#useGSAP#gsap-context#react-animations
One-click install
npx skills add https://github.com/Bharathadi01/export-work --skill gsap-react-bharathadi01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/Bharathadi01/export-work/tree/main/.agents/skills/gsap-react
Command: npx skills add https://github.com/Bharathadi01/export-work --skill gsap-react-bharathadi01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP-powered React animation setup and cleanup, enabling reliable motion in React/Next.js apps with automatic cleanup and scoped targets.

Core Features & Use Cases

  • useGSAP integration: Use the @gsap/react hook to initialize animations with automatic cleanup.
  • Scoped targets: Use refs to scope selectors within a component.
  • Context-safe callbacks: Utilize contextSafe to avoid warnings after unmount.
  • Cleanup on unmount: Revert animations and ScrollTriggers automatically.

Quick Start

Install GSAP and @gsap/react, then use the useGSAP hook inside a component to animate elements within a scoped container.

Frequently Asked Questions about gsap-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clean up GSAP animations in React to prevent memory leaks?▼

Use the useGSAP hook from @gsap/react to scope GSAP animations in React, which automatically reverts animations and ScrollTriggers on component unmount to prevent memory leaks.

What is the best way to scope GSAP selectors to a specific React component?▼

The best way to scope GSAP selectors in React is by using refs with the useGSAP hook, ensuring animations only target elements within that specific component's container.

Can I use GSAP with Next.js without getting unmount warnings?▼

Yes, you can use GSAP with Next.js safely by utilizing contextSafe callbacks within the useGSAP hook to avoid unmount warnings and ensure proper cleanup.

Do I need to manually kill tweens when a React component unmounts?▼

No, manual cleanup is unnecessary because the useGSAP hook handles context-safe callbacks and automatically reverts active animations when the React component unmounts.

Why does my GSAP animation break or throw errors after a React component unmounts?▼

GSAP animations break after React unmounts because active tweens lack proper scope and cleanup, which you can fix by wrapping them in the useGSAP hook with contextSafe callbacks.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-react

Automate GSAP animation setup and cleanup for React components.

Community
Intermediate
BowTiedSwanBowTiedSwan
41

animejs

Integrate Anime.js v4 animations across DOM and React environments.

Community
Intermediate
zakad00e2zakad00e2

design-taste-dashboards

Design task-first dashboards with adjustable variance, motion, and density.

Community
Advanced
hii-saikrishnahii-saikrishna

motion-framer

Create interactive UI components and animations in React with Motion.

Community
Advanced