Gsap React

If you're using GSAP with React, this handles the lifecycle headaches for you. The useGSAP hook wraps your animations with automatic cleanup on unmount, scoped selectors so you don't accidentally animate other components, and a contextSafe wrapper for event handlers that prevents memory leaks. The ref patterns cover single elements, arrays, and dynamic lists. Includes timeline management with pause/play/reverse controls and ScrollTrigger integration that actually cleans up properly. The dependency array works like useEffect, so animations re-run when props change. It's the official GSAP React package, and it saves you from manually managing contexts and killing tweens everywhere.

skills.sh installs: 727
GitHub stars: 9
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bbeierle12/skill-mcp-claude --skill gsap-react --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP React Integration

React-specific patterns for GSAP animations.

Quick Start

npm install gsap @gsap/react

import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

function Component() {
  const containerRef = useRef(null);

  useGSAP(() => {
    gsap.to('.box', { x: 200, duration: 1 });
  }, { scope: containerRef });

  return (
    <div ref={containerRef}>
      <div className="box">Animated</div>
    </div>
  );
}

useGSAP Hook

Basic Usage

import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

function AnimatedComponent() {
  const container = useRef(null);

  useGSAP(() => {
    // All GSAP animations here
    gsap.from('.item', {
      opacity: 0,
      y: 50,
      stagger: 0.1
    });
  }, { scope: container }); // Scope limits selector queries

  return (
    <div ref={container}>
      <div className="item">Item 1</div>
      <div className="item">Item 2</div>
      <div className="item">Item 3</div>
    </div>
  );
}

With Dependencies

function AnimatedComponent({ isOpen }) {
  const container = useRef(null);

SKILL.md on GitHub

Details

Repository: github.com/bbeierle12/skill-mcp-claude
Categories: Frontend Development, AI & Agent Building, Design & UI/UX

More from bbeierle12/skill-mcp-claude

All 8