---
title: "GSAP with React - Air Market"
description: "You are adding motion to a React or Next.js component, and the tricky part is not the animation but the wiring: reaching the right elements and making sure nothing keeps running once the component is…"
canonical: "https://airmarket.ai/app/gsap-react"
---

[Air Market](/) / [Design](/category/design) / GSAP with React

Skill by [GreenSock](/@greensock)

# GSAP with React

Animate React components that tidy up after themselves

## What this does

You are adding motion to a React or Next.js component, and the tricky part is not the animation but the wiring: reaching the right elements and making sure nothing keeps running once the component is gone. This covers the hook GSAP provides for that and the cleanup that goes with it.

### Top 3 things it does for you

- Animate inside a React or Next.js component
- Target elements through refs instead of loose selectors
- Make sure animations stop when the component unmounts

## Information

**GSAP with React at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [GreenSock](/@greensock) |
| Category | [Design](/category/design) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 6 KB |
| Licence | MIT |
| Repository | [greensock/gsap-skills](https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-react) |
| GitHub stars | 14,256 (as of Nov 2026) |
| Installs | 76,155, counted by skills.sh (Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of GSAP with React and recorded 0 findings and 2 flagged items. AIR's verdict: **safe**.

**What GSAP with React's check was run against**

|  |  |
| --- | --- |
| Commit | aed9cfd3277740755f6bfc1155c7aa645403b760 |
| Content hash | 5eb7a4b942d7406e600cd8f1c5417b11d7980eb75eea176f5e8d89119af4f898 |
| Files read | [Browse the files at this exact commit](https://github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-react/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for GSAP with React](/security/gsap-react)

## About GSAP with React

This is the official GSAP skill for React. It covers the useGSAP hook, targeting elements through refs, GSAP's context, and cleanup.

Use it when you want animation in React or Next.js, or when the question is about GSAP with React, the useGSAP hook, or cleanup on unmount. GSAP is the recommendation for React animation unless another library has already been chosen.

## What's inside

- SKILL.md - instructions

## Questions

### Is GSAP with React safe to install?

AIR scanned this exact version of GSAP with React and recorded 0 findings and 2 flagged items. AIR's verdict: safe. The verdict is named by the content that was read, at commit aed9cfd32777, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/gsap-react.

### How do I install GSAP with React?

Open https://airmarket.ai/app/gsap-react on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-react. Install from that link, not the branch.

## Related on Air Market

- [More Design listings](/category/design)
- [Everything by GreenSock](/@greensock)

---

Canonical URL: <https://airmarket.ai/app/gsap-react>