skills.rest
KryptaMedina7
KryptaMedina7COMMUNITY
Explore all skills by this author →
GitHub

gsap-utils

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

Updated Aug 10, 2026
Search Tags:#javascript#animation#gsap#clamp#scrolltrigger#tween#maprange
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-utils-kryptamedina7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/gsap-utils
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-utils-kryptamedina7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation logic often requires repetitive math for clamping values, mapping scroll progress to ranges, snapping to grids, or generating random values. This Skill provides correct usage patterns for the gsap.utils helper methods so these transformations are applied accurately in tweens, ScrollTrigger callbacks, and event handlers. ## Core Features & Use Cases - Range and Math Helpers: Covers clamp, mapRange, normalize, interpolate, snap, wrap, and wrapYoyo for transforming numeric values in animations. - Randomization and Distribution: Explains random (including the reusable function form with true), shuffle, and distribute for staggered or grid-based value assignment across targets. - Collections and Parsing: Documents selector, toArray, pipe, getUnit, unitize, and splitColor for scoped DOM queries, unit handling, and color component extraction. - Use Case: When building a scroll-driven animation, use mapRange to convert scroll progress (0-1) into rotation degrees, then snap the result to 15-degree increments for a stepped effect. ## Quick Start Ask the AI to show how to use gsap.utils.mapRange and clamp to convert scroll progress into a snapped rotation value for a 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 in GSAP?▼

Call gsap.utils.mapRange(inMin, inMax, outMin, outMax, value) to convert a value from one range to another, 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 reusable function from gsap.utils clamp or snap?▼

Omit the final value argument: gsap.utils.clamp(0, 100) returns a function you call later with any value. The exception is random(), which requires passing true as the last argument to return a reusable function.

Does gsap.utils work with ScrollTrigger and tweens?▼

Yes, gsap.utils helpers work inside tween vars as function-based values, in ScrollTrigger callbacks, and in any JavaScript driving GSAP. They are pure functions on gsap.utils and require no plugin registration.

Can gsap.utils.random pick from an array of values?▼

Yes, pass an array like gsap.utils.random(["red", "blue", "green"]) to get one random element. In tween vars you can also use the string form "random([red, blue, green])" which GSAP evaluates per target.

Why does gsap.utils.mapRange not handle units like px or %?▼

mapRange and normalize operate only on numbers and ignore unit strings. Use gsap.utils.getUnit to read a unit and gsap.utils.unitize to append one 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 React ref to get a scoped selector function. Queries like q(".box") then match only descendants of that container, not the whole document.

Related Skills

Explore More Software Engineering Skills→
aungpwintaungpwint

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
HoussamMrabetHoussamMrabet

gsap-plugins

Implements GSAP plugin registration and usage for scroll, drag, SVG, text, and physics animations.

Community
Intermediate
RSHVRRSHVR
1

elite-css-animations

Create CSS-native animations using ScrollTimeline, ViewTransition, and @property.

Community
Advanced