skills.rest
zamansepeti43
zamansepeti43COMMUNITY
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#animation#gsap#clamp#web animation#maprange#snap
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill gsap-utils-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/gsap-utils
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill gsap-utils-zamansepeti43

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 consistently without hand-rolled math errors. ## Core Features & Use Cases - Range and Value Math: Use clamp, mapRange, normalize, and interpolate to convert scroll progress, pointer input, or other signals into animation values. - Randomization and Snapping: Generate random values with random, snap values to grids or arrays with snap, shuffle arrays, and distribute values across many targets with distribute. - Units, Colors, and Collections: Parse units with getUnit and unitize, split colors into RGB or HSL components with splitColor, and scope or convert element selections with selector and toArray. - Use Case: When building a scroll-driven animation, map scroll progress from 0-1 to a 0-360 degree rotation with mapRange, then snap the result to 15-degree increments for a stepped dial effect. ## Quick Start Ask the assistant to map scroll progress to a rotation value and snap it to fixed increments using gsap.utils.

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 random value in a GSAP tween?▼

Use gsap.utils.random(min, max) for a random number, or pass an array to pick a random element. In tween vars you can also use the string form like "random(-100, 100)" which GSAP evaluates per target.

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

Both. Passing the value as the last argument returns the clamped result immediately, while omitting it returns a reusable function that clamps any value you pass later. The exception is random, which requires true as the last argument to return a function.

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

Math utilities like mapRange and normalize operate on plain numbers only. Use gsap.utils.getUnit to read a unit string and gsap.utils.unitize to append a unit 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. Selectors like ".box" then match only descendants of that container instead of the whole document.

When should I not use gsap.utils helpers?▼

Avoid relying on undocumented behavior or expecting the math utilities to handle unit strings automatically. For complex stagger logic, prefer the built-in stagger options or distribute rather than manual per-target calculations.

Related Skills

Explore More Software Engineering Skills→
nexu-ionexu-io
93.2k

gsap-utils

Implement mathematical and array-based utility functions for GSAP animation sequences and motion design workflows.

Official
Intermediate
yahav123147yahav123147

gsap

Create reliable UI animations with GSAP including reduced-motion handling and cleanup.

Community
Intermediate
su69arsu69ar
2

gsap-master

Create GSAP v3 animations with plugins and React integration.

Community
Advanced
malikkotbmalikkotb

gsap-utils

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

Community
Intermediate