skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-utils

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

1|Updated Aug 17, 2026
Search Tags:#frontend#javascript#animation#gsap#clamp#ScrollTrigger#mapRange
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-utils-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-utils
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-utils-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation logic often requires repetitive math for clamping values, mapping ranges, normalizing inputs, and snapping to grids. This Skill provides correct usage patterns for the gsap.utils API so these transformations are applied properly in tweens, ScrollTrigger callbacks, and event handlers. ## Core Features & Use Cases - Range and Math Helpers: Covers clamp, mapRange, normalize, interpolate, random, snap, wrap, and wrapYoyo for value transformation in animations. - Collection and Parsing Utilities: Includes toArray, selector, shuffle, distribute, pipe, getUnit, unitize, and splitColor for handling targets, units, and colors. - Use Case: When mapping scroll progress (0-1) to a rotation of 0-360 degrees, use gsap.utils.mapRange(0, 1, 0, 360) to get a reusable function, then call it inside a ScrollTrigger callback. ## Quick Start Use the gsap-utils skill to map scroll progress to a rotation value 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 scroll progress value to an animation range in GSAP?▼

Use gsap.utils.mapRange(inMin, inMax, outMin, outMax) to convert values between ranges, such as mapping progress 0-1 to 0-360 degrees. Omit the final value argument to get a reusable function for use in scroll or tween callbacks.

How to get a reusable random number function with gsap.utils.random?▼

Pass true as the last argument to gsap.utils.random(min, max, snapIncrement, true) to receive a function that returns a new random value on each call. Unlike other utils, random() uses true rather than omitting the value for the function form.

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

No, gsap.utils provides pure helper functions that require no registration. All methods are accessed directly on gsap.utils, such as gsap.utils.clamp() or gsap.utils.toArray().

Can I use gsap.utils.selector with React refs?▼

Yes, gsap.utils.selector accepts a DOM element or a React ref and handles .current automatically. It returns a scoped selector function so queries like '.box' match only descendants of that component.

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

mapRange and normalize operate only on numbers and ignore unit strings. Use gsap.utils.getUnit() to extract the unit and gsap.utils.unitize() to reattach it after the numeric transformation.

Related Skills

Explore More Software Engineering Skills→
brunoolfbrunoolf

gsap-utils

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

Community
Intermediate
James-GamboaJames-Gamboa

gsap-utils

Provide GSAP helper utilities for clamping, mapping, normalizing, and interpolating animation values.

Community
Intermediate
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate
Marshal-NguyenMarshal-Nguyen
1

gsap-utils

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

Community
Intermediate