skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

gsap-react

Implements GSAP animations in React using the useGSAP hook with scoped selectors and cleanup.

Updated Jul 16, 2026
Search Tags:#frontend#react#next.js#cleanup#animation#gsap#usegsap
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill gsap-react-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-react
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/gsap-react
Command: npx skills add https://github.com/X-manist/Cohmira --skill gsap-react-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

What problem does it solve? GSAP animations in React often leak memory, target wrong elements, or break during SSR because developers skip cleanup, misuse selectors, or run GSAP on the server. This Skill provides the correct patterns for integrating GSAP with React and Next.js. ## Core Features & Use Cases - useGSAP Hook Patterns: Set up animations with the @gsap/react hook, including scope, dependency arrays, and revertOnUpdate configuration. - Safe Cleanup: Use gsap.context() with ctx.revert() in useEffect, and contextSafe() for event-handler callbacks created after setup. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js and other server-rendered frameworks. - Use Case: When building a landing page in Next.js with scroll-triggered animations, apply this Skill to scope selectors to component refs, wrap click handlers in contextSafe, and avoid hydration errors. ## Quick Start Ask the AI to add a GSAP fade-in animation to a React component using the useGSAP hook with proper cleanup and a scoped ref.

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?▼

Use the useGSAP hook from @gsap/react instead of useEffect. Register it with gsap.registerPlugin(useGSAP), pass a ref as scope, and write your tweens inside the hook; cleanup runs automatically on unmount.

How to clean up GSAP animations on React unmount?▼

With useGSAP, cleanup is automatic. If using useEffect, wrap animations in gsap.context() and return ctx.revert() in the cleanup function to kill tweens and ScrollTriggers and revert inline styles.

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

GSAP runs only in the browser, so never call gsap or ScrollTrigger during SSR. Place all GSAP code inside useGSAP or useEffect so it executes client-side only; dynamic imports are an option for bundle control.

Why do my GSAP animations target the wrong elements in React?▼

Selector strings like .box can match elements outside your component across re-renders. Pass a ref as the scope argument to useGSAP or gsap.context() so selectors are limited to that component's DOM subtree.

What is contextSafe in @gsap/react?▼

contextSafe wraps functions created after useGSAP runs, such as click handlers, so animations they create are added to the GSAP context and reverted on unmount. Without it, those animations leak and persist between renders.

Related Skills

Explore More Software Engineering Skills→
abhinaaaavvvabhinaaaavvv

gsap-react

Implements GSAP animations in React using the useGSAP hook with scoped selectors and automatic cleanup.

Community
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
utsavm81098utsavm81098

gsap-core

Provide GSAP core tween methods and matchMedia for framework-agnostic animations.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced