MCPInstall

gsap

by enderpuentesFrontend & Design

Install and use GSAP (GreenSock Animation Platform) for high-performance JavaScript animations. Covers core utilities (Tween, Timeline), React integration (@gsap/react/useGSAP), Eases, and popular plugins like ScrollTrigger, ScrollSmoother, and Flip. Use when creating complex animations, scroll-based effects, UI transitions, or SVG animations, or when the user mentions GSAP, GreenSock, or ScrollTrigger.

Installs
43
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/enderpuentes/ai-agent-skills --skill gsap
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads gsap automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Deprecated: replaced by the official GSAP skills, https://github.com/greensock/gsap-skills (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-react, gsap-utils, gsap-performance, gsap-frameworks). See this repo's history for the original content.

GSAP (GreenSock Animation Platform)

Overview

GSAP is a robust, blazingly fast JavaScript animation library that lets you animate anything (CSS properties, SVG, canvas, React components). It's built for modern web performance and handles cross-browser inconsistencies out of the box.

Core components:

  • gsap.to(), gsap.from(), gsap.fromTo(): Basic tweens.
  • Timeline: gsap.timeline() to sequence multiple tweens.
  • Plugins: Add extra capabilities (e.g., ScrollTrigger for scroll animations, Flip for FLIP animations).

Installation

Reference: GSAP docs, React guide

Use casePackages
Coregsap
React / Next.js (recommended)gsap, @gsap/react

Add via your package manager (see npm). GSAP provides a dedicated React hook (useGSAP) for cleanup and context management.

Core Usage

Basic Tweens

import gsap from "gsap";

// Animate to a state
gsap.to(".box", { x: 100, duration: 1, ease: "power2.inOut" });

// Animate from a state
gsap.from(".box", { opacity: 0, y: 50, duration: 1, stagger: 0.1 });

Timelines

Timelines are perfect for choreographing sequences.

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 0.5 }, "-=0.5") // Start 0.5s early
  .to(".box3", { rotation: 360 });

Eases

Customize the feel of your animations.

  • Standard: "none", "power1" to "power4", "back", "bounce", "circ", "elastic", "expo", "sine".
  • Add .in, .out, or .inOut (e.g., "power2.inOut").

React Usage (useGSAP)

When using React (or Next.js), always use the @gsap/react package and its useGSAP hook instead of standard useEffect. It automatically handles cleanup, preventing memory leaks and strict-mode double-firings.

import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

export default function App() {
  const container = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    // gsap code here...
    // All animations created here are automatically reverted on cleanup!
    gsap.to(".box", { x: 360, duration: 2 });
  }, { scope: container }); // Scope allows selecting elements only inside this container

  return (
    <div ref={container}>
      <div className="box">Box</div>
    </div>
  );
}

Popular Plugins

Plugins extend GSAP's core functionality. They must be registered before use.

ScrollTrigger

Animate elements on scroll, pin sections, or link animations to the scrollbar.

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center", // When top of element hits center of viewport
    end: "bottom top", 
    scrub: true, // Tie animation strictly to scrollbar
    pin: true,
  },
  x: 500,
});

Other Notable Plugins:

  • Flip: Seamlessly animate elements changing state/layout.
  • Observer: Normalize events (scroll, touch, pointer) for intent-based interactions.
  • Draggable: Make elements draggable, spinnable, or tossable.
  • SplitText: Split HTML text into characters, words, or lines for granular animation (Premium).
  • DrawSVG: Intuitively animate SVG strokes (Premium).
  • MorphSVG: Morph any SVG path into another (Premium).

Common Patterns & Best Practices

  • Registration: Always register plugins up front (e.g., gsap.registerPlugin(ScrollTrigger, useGSAP)).
  • React strict mode: Rely on useGSAP() to avoid duplicate animations created by double invocation of useEffect in React 18 strict mode.
  • Transforms: Use GSAP shortcuts (x, y, rotation, scale, autoAlpha) instead of standard transform or opacity strings for better performance and accuracy.
  • FOUC (Flash of Unstyled Content): For initial load animations, hide elements with CSS (visibility: hidden, not display: none) and use gsap.from() or gsap.set(..., { autoAlpha: 0 }).

Additional Resources

FAQ

What does the gsap skill do?

Install and use GSAP (GreenSock Animation Platform) for high-performance JavaScript animations. Covers core utilities (Tween, Timeline), React integration (@gsap/react/useGSAP), Eases, and popular plugins like ScrollTrigger, ScrollSmoother, and Flip. Use when creating complex animations, scroll-based effects, UI transitions, or SVG animations, or when the user mentions GSAP, GreenSock, or ScrollTrigger.

How do I install gsap?

Run npx skills add https://github.com/enderpuentes/ai-agent-skills --skill gsap in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/gsap/ (personal) or .claude/skills/gsap/ (project).

Which AI agents can use gsap?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is gsap safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains gsap?

It is published by enderpuentes in enderpuentes/ai-agent-skills. It has 43 recorded installs.

More from enderpuentes/ai-agent-skills

View all →

pagespeed-insights

enderpuentes/ai-agent-skills

Audit web pages for performance optimization following PageSpeed Insights guidelines. Use when analyzing page performance, optimizing web applications, reviewing performance metrics, implementing Core Web Vitals improvements, or when the user mentions page speed, performance optimization, Lighthouse scores, or Core Web Vitals.

Code Quality & Workflow1.1K installs

conventional-commits

enderpuentes/ai-agent-skills

Generate and validate commit messages following the Conventional Commits specification. Use when creating git commits, writing commit messages, reviewing commit history, generating changelogs, or when the user mentions commits, commit messages, semantic versioning, or changelog generation.

Code Quality & Workflow73 installs

tailwind-css

enderpuentes/ai-agent-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design70 installs

typescript

enderpuentes/ai-agent-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow59 installs

zod

enderpuentes/ai-agent-skills

Define and use Zod schemas for TypeScript-first validation: primitives, objects, arrays, unions, refinements, transform, z.infer, parse, safeParse. Use when validating input, parsing API data, form validation with react-hook-form, or when the user mentions Zod, schema validation, or z.infer.

AI & Agents57 installs

shadcn-ui

enderpuentes/ai-agent-skills

Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind.

Frontend & Design55 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs