gsap-utils

Applies GSAP utility functions for clamping, mapping, snapping, and randomizing animation values.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/aungpwint/presentation --skill gsap-utils-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/gsap-utils
Command: npx skills add https://github.com/aungpwint/presentation --skill gsap-utils-aungpwint

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. This Skill provides correct usage patterns for the gsap.utils helper methods so animation values are transformed accurately without hand-rolled math. ## Core Features & Use Cases - Range and Math Helpers: Covers clamp, mapRange, normalize, interpolate, wrap, and wrapYoyo for converting scroll positions, progress values, and inputs into animation ranges. - Randomization and Snapping: Documents random, snap, shuffle, and distribute for grid-aligned motion, staggered values, and randomized tween targets. - Collections and Units: Explains toArray, selector, pipe, getUnit, unitize, and splitColor for DOM scoping, unit parsing, and color manipulation. - Use Case: When building a scroll-driven animation, use mapRange to convert scroll progress into a rotation angle, then snap the result to 15-degree increments for stepped motion. ## Quick Start Show me how to use gsap.utils.mapRange and snap to convert scroll progress into a snapped rotation value for my tween.

Frequently Asked Questions about gsap-utils

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

FAQPage Schema
How do I use gsap.utils.mapRange to convert values?▼

Call gsap.utils.mapRange(inMin, inMax, outMin, outMax, value) to map a number from one range to another, such as converting 0-1 progress to 0-360 degrees. Omit the value argument to get a reusable function for repeated conversions.

How do I get a reusable random function in GSAP?▼

Pass true as the last argument to gsap.utils.random, for example gsap.utils.random(-100, 100, 5, true). Unlike other utils, random does not use the omit-the-value pattern; the returned function produces a new random value on each call.

Does gsap.utils work with ScrollTrigger and tweens?▼

Yes, gsap.utils helpers work inside tween vars as function-based values and inside ScrollTrigger or Observer callbacks. They are pure functions on gsap.utils and require no plugin registration.

Can gsap.utils.mapRange handle units like px or percent?▼

No, mapRange and normalize operate on plain numbers only. Use gsap.utils.getUnit to read a unit string and gsap.utils.unitize to append units when building CSS or tween values.

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

Use gsap.utils.selector(scope) with a DOM element or React ref to get a scoped selector function. Queries like q(".box") then match only descendants of that container instead of the whole document.