gsap-utils

Implements GSAP utility methods for clamping, mapping, snapping, and transforming animation values.

1|Updated Aug 6, 2026
One-click install
npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-utils-luce12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/luce12/agent-dev-workflow/tree/main/toolkits/gsap-utils
Command: npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-utils-luce12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation logic often requires repetitive math for value mapping, clamping, snapping, and randomization, and hand-rolled helpers are error-prone and inconsistent across a codebase. ## Core Features & Use Cases - Range and Math Helpers: Use clamp, mapRange, normalize, interpolate, wrap, and wrapYoyo to transform values between ranges, including reusable function forms for scroll handlers and tween callbacks. - Random, Snap, and Distribute: Generate random values with optional snap increments, snap values to grids or arrays, and distribute values across targets by index or grid position for advanced staggers. - Units, Colors, and Collections: Parse units with getUnit and unitize, split colors into RGB or HSL arrays, scope selectors to components, and convert NodeLists with toArray. - Use Case: When mapping scroll progress (0–1) to a rotation of 0–360 degrees, create a reusable mapper with gsap.utils.mapRange and call it inside a ScrollTrigger callback. ## Quick Start Ask the agent to map scroll progress to an element's rotation using gsap.utils.mapRange with snapping to 15-degree increments.

Frequently Asked Questions about gsap-utils

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map a value from one range to another in GSAP?▼

Use gsap.utils.mapRange(inMin, inMax, outMin, outMax, value) to convert a value between ranges, such as mapping scroll progress 0–1 to 0–360 degrees. Omit the value argument to get a reusable function for repeated conversions.

How to generate random values in GSAP tweens?▼

Use gsap.utils.random(min, max, snapIncrement) for an immediate value, or pass true as the last argument to get a reusable function. In tween vars, use the string form like "random(-100, 100, 5)" and GSAP evaluates it per target.

Does gsap.utils need to be registered like GSAP plugins?▼

No, gsap.utils provides pure helper functions that require no registration. All utilities are accessed directly on gsap.utils, such as gsap.utils.clamp() or gsap.utils.snap(), and work in tween vars or callbacks.

Can gsap.utils.mapRange handle values with units like px or %?▼

No, mapRange and normalize work only on numbers and do not handle units. Use gsap.utils.getUnit to read a unit string and gsap.utils.unitize to append units when building CSS values.

How do I scope GSAP selectors to a component or React ref?▼

Use gsap.utils.selector(scope) with a DOM element or ref to get a scoped selector function. Selectors like ".box" then match only descendants of that container, preventing accidental selection across the whole document.