skills.rest
Marshal-Nguyen
Marshal-NguyenCOMMUNITY
Explore all skills by this author →
GitHub

gsap-utils

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

1|Updated Aug 17, 2026
Search Tags:#javascript#animation#utility functions#gsap#clamp#scrolltrigger#maprange
One-click install
npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill gsap-utils-marshal-nguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/Marshal-Nguyen/Skill_Claude_Agent/tree/main/claude/skills/gsap-utils
Command: npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill gsap-utils-marshal-nguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation logic often requires repetitive math for clamping values, mapping ranges, snapping to grids, and randomizing parameters, and hand-rolled helpers are error-prone and inconsistent across a codebase. ## Core Features & Use Cases - Range and Math Utilities: Use clamp, mapRange, normalize, interpolate, wrap, and wrapYoyo to transform values for scroll-driven or progress-driven animations. - Randomization and Snapping: Generate random values with optional snap increments, shuffle arrays, and distribute values across targets with grid and ease support. - DOM and Unit Helpers: Convert selectors and NodeLists with toArray, scope selectors to components with selector, and parse colors or units with splitColor, getUnit, and unitize. - Use Case: When building a scroll-based animation, map scroll progress (0-1) to a rotation range with mapRange, snap positions to a 20px grid, and randomize stagger delays across elements. ## Quick Start Use the gsap-utils skill to map scroll progress from 0 to 1 into a 0 to 360 degree rotation and snap the result 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 get a random number in a GSAP tween?▼

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 you can also use the string form like "random(-100, 100, 5)" which GSAP evaluates per target.

Does gsap.utils.clamp return a function or a value?▼

It depends on the arguments: clamp(min, max, value) returns the clamped number, while clamp(min, max) without the value returns a function you call later with each value. Most gsap.utils methods follow this pattern, except random() which uses a true flag.

Can I use gsap.utils with React refs and scoped selectors?▼

Yes, gsap.utils.selector(scope) accepts a DOM element or React ref and returns a scoped selector function that only matches descendants of that component. This prevents selectors like ".box" from matching elements elsewhere in the document.

Why does mapRange not preserve units like px or percent?▼

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

When should I use gsap.utils.distribute instead of stagger?▼

Use distribute when you need values spread across targets based on position, grid coordinates, or an ease curve, such as scaling center elements differently from edges. It returns a function receiving index, target, and targets that you can pass directly as a tween property value.

Related Skills

Explore More Software Engineering Skills→
brunoolfbrunoolf

gsap-utils

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

Community
Intermediate
DanielV-94DanielV-94

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

Community
Intermediate
yyykkkunyyykkkun

gsap-scrolltrigger

Create scroll-linked web animations using GSAP's ScrollTrigger plugin.

Community
Intermediate
xingBaGanxingBaGan

gsap-core

Animate CSS properties on DOM elements with GSAP tweens and easing.

Community
Advanced