83.3K+Download
Skip to the usage guide
gsap-performanceby GreenSock

GSAP Performance Skill.

A Claude Code and Codex skill for motion and video: gSAP performance: transforms, avoiding layout thrash, will-change, batching.

  • Motion & Video
  • UI code
Download OpenDesignView usage guide
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- 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. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
Front matter and section headings read from the upstream file on 2026-09-14 · 4,105 characters in full

01 What it does

What the gsap-performance Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Official GSAP guidance for keeping animations at a smooth 60fps by choosing cheap properties and avoiding layout work. It tells you to animate transform keys (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) and opacity instead of width, height, top, left, margin or padding, to put will-change in CSS only on elements that actually animate, and to do all DOM reads before writes so layout is not thrashed.

Batching guidance covers stagger over hand-delayed tweens, virtualization for long lists, gsap.quickTo() for mouse followers, pin and scrub tuning with debounced ScrollTrigger.refresh(), and killing off-screen tweens. It is for designers and developers tuning existing GSAP animations, not building them.

What it produces

  • A will-change declaration to add to the CSS of the animated element.
  • A gsap.quickTo() setup for x and y, driven by a mousemove listener on a container.
See the example prompt ↗

How It Works

  1. 01
    Animate compositor-friendly Properties

    Restrict animation to transform keys and opacity, which keep work on the compositor instead of triggering layout and paint.

  2. 02
    Let GSAP Batch the Writes

    GSAP already batches updates internally, so the risk is your own DOM code interleaving reads and writes around it.

  3. 03
    Reuse One Tween for Hot Values

    For properties updated on every pointer move, gsap.quickTo() keeps a single tween alive instead of allocating a new one per update.

  4. 04
    Tame scroll-driven Work

    A small scrub value such as scrub: 1 can cut the work done during scroll, but the file says to test that setting on low-end devices.

  5. 05
    Stop Animation You Cannot See

    Pause or kill off-screen and inactive animations, for example when the user navigates away from the section.

02 Find your fit

When to Use the gsap-performance Skill

Use the gsap-performance skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • An existing GSAP animation is dropping frames and you want to cut its layout and paint cost.
  • Someone asks about jank, FPS or best practices for fast animation in a GSAP project.
  • You are animating a long list and need advice on virtualization and avoiding hundreds of simultaneous tweens.
  • A scroll section pins an element and you need to limit what gets promoted.

Know the Boundaries

  • Setting will-change or force3D on everything just in case is explicitly wrong; they are for elements that are actually animating.
  • Hundreds of overlapping tweens or ScrollTriggers are treated as an anti-pattern when they have not been tested on low-end devices.

What to Provide

  • The properties your animation currently changesYou need to know what is being animated to judge whether transform and opacity can replace layout-heavy properties.

03 Inside the skill

Rules the gsap-performance Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Skip layout-triggering Properties

    width, height, top, left, margin and padding trigger layout and can cause jank, so avoid them when a transform achieves the same effect.

  2. Move with X and Y, Not Left and Top

    GSAP's x and y are transforms (translate) by default, so use them rather than left or top for movement.

  3. will-change Only Where Something Animates

    Set will-change in CSS on the elements that will animate; it hints the browser to promote the layer, so it belongs on animated elements only.

  4. Stagger Instead of Manual Delays

    When the animation is identical across elements, use stagger rather than many separate tweens with hand-written delays.

  5. Never Build Timelines per Frame

    Reuse timelines; creating new timelines every frame is called out as wasteful.

  6. Refresh ScrollTrigger on Real Layout Changes Only

    Call ScrollTrigger.refresh() when layout actually changes, such as after content load, not on every resize, and debounce it where possible.

  7. Clean up What You Start

    Clean up or kill off-screen animations and refresh ScrollTrigger when layout changes, debounced where possible, so nothing keeps running after it is needed.

04 Put it to work

Install gsap-performance in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gsap-performance to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

Generic skills CLI form for skills/gsap-performance/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Look for DOM reads and writes that interleave, since that causes repeated layout thrashing; reads should all come first.
  • Confirm nothing is left running: stray tweens and ScrollTriggers keep going and hurt performance and correctness.
  • Confirm the properties you animate stay on transform and opacity, so the browser pages only composite work.

In OpenDesign gsap-performance is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill file
skills/gsap-performance/SKILL.md Content checksum recorded at verification; commit aed9cfd
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
15,248 GitHub snapshot taken 2026-09-14 for the whole greensock/gsap-skills repository, which contains 8 skills in this catalog. Not a rating or usage count for gsap-performance.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to Use This SkillApply when optimizing GSAP animations for 60fps or jank; points to related skills.
  2. Prefer Transform and OpacityAnimate transform keys and opacity; avoid layout properties; x and y over left and top.
  3. will-changeAdd will-change in CSS on elements that will animate to hint layer promotion.
  4. Batch Reads and WritesGSAP batches writes; do all DOM reads before writes to avoid thrashing.
  5. Many Elements (Stagger, Lists)Stagger beats manual delays; virtualize long lists; reuse timelines instead of making new ones.
  6. Frequently updated properties (e.g. mouse followers)Use gsap.quickTo with a mousemove handler for often-updated x and y values.
  7. ScrollTrigger and PerformancePin only what is needed, try a small scrub value, refresh only on layout change.
  8. Reduce Simultaneous WorkPause or kill off-screen animations; simplify or sequence heavy property animation.
  9. Best practicesFour-point checklist: transform and opacity, scoped will-change, stagger, cleanup and refresh.
  10. Do NotAnti-patterns: layout properties for movement, blanket will-change or force3D, untested volume, ignored cleanup.
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 4,105 characters. Read the full file on GitHub.

06 Before you install

Questions About the gsap-performance Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I use this instead of gsap-core?

No. This skill is the performance layer over normal GSAP work: animations are built with gsap-core (transforms, autoAlpha) and gsap-timeline, and ScrollTrigger performance details live in gsap-scrolltrigger.

How should I build a mouse follower?

Use gsap.quickTo() for the x and y values with a duration and ease, then call the returned functions from a mousemove listener. It reuses a single tween rather than creating a new tween on every update.

GSAP Performance

Run gsap-performance on a Real Motion and Video Task.

The gsap-performance skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance