skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

gsap-utils

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

Updated Sep 1, 2026
Search Tags:#javascript#utilities#animation#gsap#clamp#maprange#snap
One-click install
npx skills add https://github.com/umairshahid622/perfumora --skill gsap-utils-umairshahid622
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/umairshahid622/perfumora/tree/main/perfumora/.agents/skills/gsap-utils
Command: npx skills add https://github.com/umairshahid622/perfumora --skill gsap-utils-umairshahid622

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation code often requires repetitive math for value mapping, clamping, snapping, and randomization, and developers frequently misuse the gsap.utils API signatures or forget the function-form patterns. ## Core Features & Use Cases - Range Math: Use clamp, mapRange, normalize, and interpolate to convert scroll progress, pointer input, or other values into animation ranges. - Randomization and Snapping: Generate random values with random, snap values to grids with snap, and shuffle arrays for staggered effects. - Collections and Composition: Convert selectors to arrays with toArray, scope selectors with selector, and chain transforms with pipe. - Use Case: When building a scroll-driven animation, map scroll progress (0-1) to a rotation range with mapRange, snap positions to a 20px grid, and randomize target offsets per element. ## 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 steps.

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 do I get a reusable random function with gsap.utils.random?▼

Pass true as the last argument to gsap.utils.random to get a reusable function, for example gsap.utils.random(-200, 500, 10, true). Unlike other utils, random uses true instead of omitting the value argument.

Does 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.

When should I use snap versus clamp in GSAP animations?▼

Use snap to round values to the nearest multiple or nearest value in an array, ideal for grid-aligned or step-based motion. Use clamp to constrain a value within a minimum and maximum boundary without rounding.

Related Skills

Explore More Software Engineering Skills→
skyf0xxskyf0xx
26

gsap-utils

Map, clamp, normalize, and interpolate values for GSAP animation sequences.

Community
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

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