New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

GSAP Performance Tuning

by greensock in greensock/gsap-skills

Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.

MITAuto-check passedFrontend & Design

Install GSAP Performance Tuning

skills CLI
$ npx skills add greensock/gsap-skills --skill gsap-performance -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install greensock/gsap-skills gsap-performance --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/greensock/gsap-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/gsap-performance .claude/skills/gsap-performance && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
gsap-performance
GitHub stars
16k
Used in
4 other repos
Token cost
~1k tokens
SKILL.md length
473 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.

  • Tuning GSAP animations that stutter or drop frames
  • SKILL.md covers When to Use This Skill, Prefer Transform and Opacity, will-change and Batch Reads and Writes, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Making a mouse-follower animation cheaper to run

What it does

The skill is about holding GSAP animations at a smooth 60fps and cutting layout and paint cost. Its main rule is to animate transform properties such as x, y, scale and rotation, plus opacity, which stay on the compositor, instead of width, height, top, left, margin or padding, which trigger layout and cause jank. It also recommends the will-change CSS hint on elements that are about to animate.

Further advice covers batching and volume. Do all DOM reads before all writes to avoid layout thrashing, use stagger rather than many separate delayed tweens, virtualize or animate only visible items in long lists, reuse timelines, and use gsap.quickTo() for values that update constantly, such as a mouse follower. A ScrollTrigger section suggests pinning only what is needed and trying a small scrub value, tested on low-end devices. The sibling skills gsap-core, gsap-timeline and gsap-scrolltrigger are named for related work.

When your agent uses it

  • Tuning GSAP animations that stutter or drop frames
  • Making a mouse-follower animation cheaper to run
  • Reviewing a long animated list for layout-heavy properties
  • Checking ScrollTrigger pinning and scrub settings for scroll jank

Example prompts

  • “My GSAP hero animation janks on mobile. Find out why and fix it.”
  • “Replace the left and top tweens in menu.js with transform-based ones.”
  • “Make this cursor follower use quickTo instead of creating a new tween on every mousemove.”

What it can do on your machine

Read from SKILL.md and the folder at commit aed9cfd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

GSAP Performance Tuning loads about 1k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 473 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from greensock/gsap-skills at commit aed9cfd, republished under its MIT licence (© greensock). 473 words, ~1,027 tokens.

Download SKILL.mdSave it as .claude/skills/gsap-performance/SKILL.md (or your agent's skills folder).
name
gsap-performance
description
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
license
MIT

GSAP Performance

When to Use This Skill

Apply when optimizing GSAP animations for smooth 60fps, reducing layout/paint cost, or when the user asks about performance, jank, or best practices for fast animations.

Related skills: Build animations with gsap-core (transforms, autoAlpha) and gsap-timeline; for ScrollTrigger performance see gsap-scrolltrigger.

Prefer Transform and Opacity

Animating transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) and opacity keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.

  • ✅ Prefer: x, y, scale, rotation, opacity.
  • ❌ Avoid when possible: width, height, top, left, margin, padding (they trigger layout and can cause jank).

GSAP’s x and y use transforms (translate) by default; use them instead of left/top for movement.

will-change

Use will-change in CSS on elements that will animate. It hints the browser to promote the layer.

css
will-change: transform;

Batch Reads and Writes

GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).

Many Elements (Stagger, Lists)

  • Use stagger instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.
  • For long lists, consider virtualization or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.
  • Reuse timelines where possible; avoid creating new timelines every frame.

Frequently updated properties (e.g. mouse followers)

Prefer gsap.quickTo() for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update.

javascript
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
    yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });

document.querySelector("#container").addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});
Show full SKILL.md (199 more words)Show less

ScrollTrigger and Performance

  • pin: true promotes the pinned element; pin only what’s needed.
  • scrub with a small value (e.g. scrub: 1) can reduce work during scroll; test on low-end devices.
  • Call ScrollTrigger.refresh() only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.

Reduce Simultaneous Work

  • Pause or kill off-screen or inactive animations when they’re not visible (e.g. when the user navigates away).
  • Avoid animating huge numbers of properties on many elements at once; simplify or sequence if needed.

Best practices

  • ✅ Animate transform and opacity; use will-change in CSS only on elements that animate.
  • ✅ Use stagger instead of many separate tweens with manual delays when the animation is the same.
  • ✅ Use gsap.quickTo() for frequently updated properties (e.g. mouse followers).
  • ✅ Clean up or kill off-screen animations; call ScrollTrigger.refresh() when layout changes, debounced when possible.

Do Not

  • ❌ Animate width/ height/ top/ left for movement when x/ y/ scale can achieve the same look.
  • ❌ Set will-change or force3D on every element “just in case”; use for elements that are actually animating.
  • ❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.
  • ❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.

© greensock, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/gsap-performance of greensock/gsap-skills.

Open the folder on GitHubat commit aed9cfd

Used in 5 other repositories

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in greensock/gsap-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

GSAP Performance Tuning next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

GSAP Performance Tuning compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
GSAP Performance Tuning this skillgreensock/gsap-skills16k4 repos~1kAutomated safety check: PassMIT
Fixing Motion Performanceibelick/ui-skills9.5k5 repos~1.4kAutomated safety check: PassMIT
Motion DesignLottieFiles/motion-design-skill2k1 repos~3.1kAutomated safety check: PassMIT
Gsapboraoztunc/skills3975 repos~1.9kAutomated safety check: PassApache-2.0
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Animate Textpixel-point/animate-text1491 repos~1.6kAutomated safety check: PassNone

Similar skills

  • Fixing Motion Performance

    ibelick/ui-skills

    Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.

    9.5k GitHub starsUsed in 5 repos~1.4k tokens
    Frontend & DesignAuto-check passed

  • Motion Design

    LottieFiles/motion-design-skill

    Applies motion design principles to create emotionally-driven, technically sound animations and transitions.

    2k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Gsap

    boraoztunc/skills

    GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.

    397 GitHub starsUsed in 5 repos~1.9k tokens
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Animate Text

    pixel-point/animate-text

    Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.

    149 GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • Silk Design

    bendrape1-byte/silk-design

    Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.

    138 GitHub stars~1.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from greensock/gsap-skills

All 8 skills in this repo

  • GSAP ScrollTrigger

    greensock/gsap-skills

    Teaches an agent how to wire up GSAP's ScrollTrigger plugin for scroll-linked animation, pinned sections and scrub, including the start and end position syntax.

    16k GitHub starsUsed in 5 repos~4.6k tokens
    Auto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Auto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 4 repos~2.6k tokens
    Auto-check passed

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Auto-check passed

  • GSAP Timeline

    greensock/gsap-skills

    Teaches the GSAP timeline API for sequencing animations: gsap.timeline(), the position parameter, labels, defaults, nesting and playback control.

    16k GitHub starsUsed in 4 repos~1.1k tokens
    Auto-check passed

  • GSAP Utils

    greensock/gsap-skills

    Covers the gsap.utils helpers for clamping, range mapping, normalizing, snapping, randomizing and wrapping values in GSAP animations.

    16k GitHub starsUsed in 4 repos~3k tokens
    Auto-check passed

Works with

Categories

Questions about GSAP Performance Tuning

What does GSAP Performance Tuning do?

Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties. The skill is about holding GSAP animations at a smooth 60fps and cutting layout and paint cost. Its main rule is to animate transform properties such as x, y, scale and rotation, plus opacity, which stay on the compositor, instead of width, height, top, left, margin or padding, which trigger layout and cause jank.

When should I use GSAP Performance Tuning?

GSAP Performance Tuning fits situations like: tuning GSAP animations that stutter or drop frames; making a mouse-follower animation cheaper to run; reviewing a long animated list for layout-heavy properties; checking ScrollTrigger pinning and scrub settings for scroll jank.

How do I install GSAP Performance Tuning in Claude Code?

Run `npx skills add greensock/gsap-skills --skill gsap-performance -a claude-code`. Or copy the skill folder (skills/gsap-performance in greensock/gsap-skills) into .claude/skills/gsap-performance in your project. Claude Code loads it when a task matches its description.

How do I install GSAP Performance Tuning in Codex?

Run `npx skills add greensock/gsap-skills --skill gsap-performance -a codex`. Or copy the skill folder (skills/gsap-performance in greensock/gsap-skills) into .agents/skills/gsap-performance in your project. Codex loads it when a task matches its description.

Can I use GSAP Performance Tuning in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add greensock/gsap-skills --skill gsap-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gsap-performance, .gemini/skills/gsap-performance, .github/skills/gsap-performance and .opencode/skills/gsap-performance in your project.

What does GSAP Performance Tuning need to run?

SKILL.md names no scripts, command-line tools or credentials: GSAP Performance Tuning is instructions for the agent only.

Does GSAP Performance Tuning access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is GSAP Performance Tuning safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does GSAP Performance Tuning use?

GSAP Performance Tuning is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does GSAP Performance Tuning use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to GSAP Performance Tuning?

Skills that share tags, products or a category with GSAP Performance Tuning: Fixing Motion Performance (ibelick/ui-skills, 9.5k stars), Motion Design (LottieFiles/motion-design-skill, 2k stars), Gsap (boraoztunc/skills, 397 stars) and Auteur (agiwhitelist/auteur, 1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains GSAP Performance Tuning?

greensock (a GitHub organization) maintains it in greensock/gsap-skills, which has 16,062 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on July 29, 2026.

Source: greensock/gsap-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.