gsap-react

Integrate GSAP animations into React components using the useGSAP hook.

Updated May 31, 2026

Search Tags:#React #animation #GSAP #React animation #GSAP in React

Ready to run

npx skills add https://github.com/fanguyun/SkillManager --skill gsap-react-fanguyun

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/fanguyun/SkillManager/tree/main/gsap-react
Command: npx skills add https://github.com/fanguyun/SkillManager --skill gsap-react-fanguyun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @gsap/react, and includes scripts (resource) components.

What problem does it solve?

This Skill addresses the challenge of implementing smooth and efficient animations in React applications, using the GreenSock Animation Platform (GSAP).

Core Features & Use Cases

React GSAP Integration: Utilizes the @gsap/react package to integrate GSAP animations into React components.
Animation Hooks: Provides the useGSAP() hook for managing animations, ensuring proper cleanup and context handling.
Ref Scoping: Allows for precise control over animation targets by using React refs, avoiding potential issues with selector strings.
Use Case: When developing interactive web applications with complex animations, this Skill streamlines the GSAP setup and maintenance process.

Quick Start

Install GSAP and @gsap/react, then use the useGSAP hook in your React component to animate elements.

Frequently Asked Questions about gsap-react

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

FAQPage Schema

How do I integrate GSAP animations into React components?▼

To integrate GSAP animations into React components, use the `@gsap/react` package and the `useGSAP()` hook to manage animation setup and ensure proper cleanup and context handling.

Why should I use refs instead of selector strings for GSAP in React?▼

Using React refs for GSAP animations provides precise control over animation targets, avoiding potential issues with selector strings and ensuring proper context handling.

Does GSAP work with React hooks for animation management?▼

Yes, GSAP works with React hooks through the `@gsap/react` package, which provides the `useGSAP()` hook specifically for managing animations and ensuring proper cleanup.

What is the best way to handle GSAP animation cleanup in React?▼

The best way to handle GSAP animation cleanup in React is by using the `useGSAP()` hook from `@gsap/react`, which manages animation context and automatically handles cleanup to prevent memory leaks.

Do I need @gsap/react to use GSAP in my React application?▼

Yes, you need `@gsap/react` to properly integrate GSAP into React applications, as it provides the necessary hooks for animation setup, context handling, and automatic cleanup.

Can I use GSAP for complex interactive web animations in React?▼

Yes, you can use GSAP for complex interactive web animations in React by leveraging the `useGSAP()` hook to streamline setup and maintenance of smooth, efficient animations.