Skip to content
Get packs

GSAP Performance Guide

Makes the agent write GSAP animations that stay smooth at 60fps and avoid jank.

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

Once installed, the agent follows GSAP animation best practices when writing or reviewing web animations. It favours transform and opacity properties over layout-heavy ones like width or top, suggests will-change only on elements that actually animate, and recommends gsap.quickTo() for frequently updated values such as mouse followers. It also advises on stagger, cleaning up off-screen animations, and limiting ScrollTrigger refreshes.

Great for

  • Front-end developers building GSAP animations who notice dropped frames or stutter
  • Designers or developers reviewing animation code for performance before shipping
  • Teams with interactive pages (mouse followers, scroll-driven sections) that need to run well on low-end devices

Skip it if

  • Projects that do not use GSAP, since the advice is specific to the GSAP library (the guidance is general web performance advice, but the skill itself adds little outside GSAP)
  • Non-technical users looking for a finished animation; this skill gives guidance, not ready-made effects
  • Deep rendering or browser-engine debugging, which requires profiling tools rather than these general rules

Try asking

  • “Why is my GSAP scroll animation janky on mobile? Review my code and suggest fixes.”
  • “Rewrite this animation that moves elements with left and top so it uses transforms instead.”
  • “Make my mouse-follower animation more efficient using the best GSAP approach.”
  • “Check my ScrollTrigger setup for unnecessary refreshes or pinned elements.”
Step-by-step guide: how to use GSAP Performance GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    gsap-performance.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-performance.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-performance.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your actual animation code and describe the symptom (jank, slow on mobile) so it can target the right advice.
  • Verify suggestions with the browser's performance profiler, since the skill's advice is general guidance and not measured results.
  • Mention related GSAP skills (gsap-core, gsap-timeline, gsap-scrolltrigger) when your problem spans those areas.

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.