PlugWiki

GSAP Utils skill for Claude Code: use gsap.utils helpers correctly

Official GSAP skill that makes Claude use the gsap.utils helper functions correctly, for developers writing GSAP code.

Installs
69.4K
on skills.sh
Stars
17.7K
on GitHub
Updated
Jul 2026
last repo commit

When you ask about gsap.utils, clamp, mapRange, random, snap, toArray, wrap or pipe, Claude loads this skill. It knows the arguments of each helper and when to leave out the value to get back a reusable function (random() takes true as its last argument for that instead).

It is one text file and bundles no scripts. It covers clamping and ranges, random and snap, units and parsing, and array helpers.

Good for

  • Developers who want number and array helpers without extra libraries
  • Anyone mapping scroll or mouse values to animation values
  • Developers who keep forgetting helper signatures

Install gsap-utils

Claude Code

  1. 1

    Copy this prompt.

    Install the gsap-utils skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.

Sections in SKILL.md

  1. When to Use This Skill
  2. Overview
  3. Clamping and Ranges
  4. clamp(min, max, value?)
  5. mapRange(inMin, inMax, outMin, outMax, value?)
  6. normalize(min, max, value?)
  7. interpolate(start, end, progress?)
  8. Random and Snap
  9. random(minimum, maximum[, snapIncrement, returnFunction]) / random(array[, returnFunction])
  10. snap(snapTo, value?)
  11. shuffle(array)
  12. distribute(config)
  13. Units and Parsing
  14. getUnit(value)
  15. unitize(value, unit)
  16. splitColor(color, returnHSL?)

Key facts

Author
GreenSock (GSAP)
Repository
greensock/gsap-skills
Installs on skills.sh
69,406 (2 Nov 2026)
GitHub stars (repo)
17,689 (2 Nov 2026)
License
MIT
Last commit (repo)
29 Jul 2026
What installs
SKILL.md only (1 file); bundles no scripts
Works in
Claude Code, Cursor, Codex, OpenCode, Google Antigravity and Pi (skill folders listed in the README); 40+ more through the skills CLI
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

  • Keep values in range and convert between ranges

    Claude uses these helpers to limit a number, map it from one range to another, express it as 0 to 1, or blend two values.

    Try: “Map scroll position 0-1000 to rotation 0-360 with gsap.utils.”

    Read · clamp, mapRange, normalize, interpolate

  • Random values, snapping and spreading values across targets

    Claude generates random or snapped values, shuffles arrays and distributes values across a group of elements.

    Read · random, snap, shuffle, distribute

  • Read and change units and colours

    Claude reads the unit of a value, adds one, or splits a colour into its channels.

    Read · getUnit, unitize, splitColor

  • Scoped selectors and array conversion

    Claude builds a selector limited to a scope and converts a selector, NodeList or element into an array.

    Read · selector, toArray

  • Chain functions and loop or bounce values

    Claude chains helpers into one function and wraps a value around a range, in a loop or back and forth.

    Read · pipe, wrap, wrapYoyo

From the official docs

Questions

What does the GSAP Utils skill do?

It makes Claude use GSAP's built-in helper functions in gsap.utils instead of writing its own math. It lists clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, toArray, selector, pipe, wrap and wrapYoyo.

How do I install it?

Use the install box at the top of this page. The README also documents a Claude Code plugin marketplace route (/plugin marketplace add greensock/gsap-skills) and a Cursor remote rule that point at the whole repo, which holds 8 GSAP skills. Restart your agent session afterwards so it finds the new skill.

Do I need the other GSAP skills?

No. Its SKILL.md lists gsap-core, gsap-timeline and gsap-scrolltrigger (building animations) and gsap-plugins (CustomEase and other easing utilities) as related skills, but it does not say it requires them. The repo has 8 skills in all (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks), and the README installs them together with one skills CLI command.

Does it work in Cursor, Codex or Copilot?

Cursor and Codex: yes, the README lists both, using the skills CLI or by copying the skills folder. GitHub Copilot is different: the README says Copilot does not load Cursor or Claude skill files, so you copy its Copilot instructions file into your repo instead. The README does not mention the Claude app.

Does it need an API key or an account?

No key or account is mentioned in the SKILL.md. GSAP itself is free, including every plugin, according to the README, and installs from the public gsap npm package.

Is it safe to install?

It is low risk. It is a single text file that tells Claude how to write GSAP code, and it bundles no scripts. The repo README rates its own risk level LOW. You still read the code Claude writes before you ship it.

Information

updated Nov 2, 2026

Repository
greensock/gsap-skills
Folder
skills/gsap-utils

greensock/gsap-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. gsap-utils SKILL.md · github.com
  2. greensock/gsap-skills README · github.com

Updated Nov 2, 2026.