skills.rest
kartojal
kartojalCOMMUNITY
Explore all skills by this author →
𝕏@kartojalGitHub

gsap-react

Automate GSAP animation setup in React with useGSAP and gsap.context.

11|1|Updated Mar 20, 2026
Search Tags:#react#cleanup#animation#hook#gsap#usegsap#gsap.context
One-click install
npx skills add https://github.com/kartojal/openvps --skill gsap-react-kartojal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/kartojal/openvps/tree/main/.agents/skills/gsap-react
Command: npx skills add https://github.com/kartojal/openvps --skill gsap-react-kartojal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured pattern for adding GSAP-based animations to React components, ensuring safe cleanup, scoped selectors, and SSR-friendly usage.

Core Features & Use Cases

  • useGSAP hook for declarative and cleanup-friendly animation setup.
  • gsap.context() to scope selectors and ensure proper revert on unmount.
  • Clear guidance for integrating GSAP in React/Next.js workflows and avoiding SSR pitfalls.

Quick Start

Add GSAP-powered animations to a React component using the useGSAP hook with a scoped ref, ensuring cleanup on unmount.

Frequently Asked Questions about gsap-react

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

FAQPage Schema
How do I use GSAP animations in React without causing memory leaks?▼

GSAP context scoping confines animation selectors to specific component refs, ensuring gsap.context() reverts animations exclusively on unmount, preventing selector collisions and memory leaks across React DOM trees.

Does GSAP work with Next.js server-side rendering?▼

GSAP requires SSR-safe client-side execution for Next.js projects. Using the useGSAP hook ensures animations initialize properly within the client environment, avoiding server-side rendering hydration pitfalls.

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

The best way to scope GSAP selectors in React is using gsap.context() within the useGSAP hook, applying a scoped ref to restrict animation targeting and ensure proper revert on unmount.

Do I need @gsap/react to animate components in React?▼

Yes, you need @gsap/react along with the gsap and React environment to properly operate the useGSAP hook, which automates safe animation setup and cleanup for your project.

Why does my GSAP animation break when navigating between React routes?▼

GSAP animations break during React route navigation due to improper cleanup. Applying gsap.context() with useGSAP ensures structured animation revert on unmount, resolving state conflicts during route transitions.

Related Skills

Explore More Software Engineering Skills→
karenrebecagkarenrebecag

gsap-react

Set up and clean up GSAP animations in React components with the useGSAP hook.

Community
Intermediate
mattwoodcomattwoodco
3

motion

Create declarative animations and transitions in React and Next.js with Framer Motion.

Community
Intermediate
AlejandroFiginiAlejandroFigini

gsap-react

Automate GSAP animation setup and cleanup for React components.

Community
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate