skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

gsap-utils

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

Updated Aug 12, 2026
Search Tags:#javascript#animation#gsap#scrolltrigger#web animation#gsap.utils#value mapping
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill gsap-utils-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/gsap-utils
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill gsap-utils-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation code often requires repetitive math: mapping scroll progress to values, clamping inputs, snapping to grids, or generating random values. This Skill provides correct usage patterns for the gsap.utils helper API so these transforms are applied properly in tweens, ScrollTrigger callbacks, and event handlers. ## Core Features & Use Cases - Range Math: clamp, mapRange, normalize, and interpolate for converting scroll positions, progress values, and inputs into animation ranges. - Randomization and Snapping: random (including the string form like "random(-100, 100)" in tween vars), snap, shuffle, and distribute for grid-based staggers and stepped values. - Collections and Units: toArray, selector (scoped component queries), pipe, wrap, wrapYoyo, getUnit, unitize, and splitColor for color component animation. - Use Case: When building a scroll-driven animation, use mapRange to convert scroll progress to rotation degrees, snap to align elements to a grid, and gsap.utils.selector to scope selectors inside a React component ref. ## Quick Start Use the gsap-utils skill to map scroll progress from 0-1 to a 0-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 scroll progress to an animation value in GSAP?▼

Use gsap.utils.mapRange(inMin, inMax, outMin, outMax, value) to convert a value from one range to another, such as mapping 0-1 progress to 0-360 degrees. Omit the value argument to get a reusable function for scroll handlers.

How to get random values in GSAP tweens?▼

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

What is the difference between gsap.utils clamp, normalize, and interpolate?▼

clamp constrains a value between min and max, normalize converts a value to a 0-1 ratio within a range, and interpolate blends between two values (numbers, colors, or objects) at a given progress. All three return a reusable function when the value argument is omitted.

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

No, gsap.utils provides pure helper functions that require no registration. They are available directly on the gsap object, for example gsap.utils.clamp(), and can be used in tween vars, ScrollTrigger callbacks, or any JavaScript driving GSAP.

How do I scope GSAP selectors to a React component?▼

Use gsap.utils.selector(scope) with a DOM element or React ref to create a scoped selector function. The returned function finds elements only within that container, so selectors like ".box" match descendants of the component instead of the whole document.

Why does gsap.utils.random not return a function when I omit the value?▼

random() is the exception to the omit-the-value pattern used by other utils. To get a reusable function, pass true as the last argument, for example gsap.utils.random(-200, 500, 10, true), and each call returns a new random value.

Related Skills

Explore More Software Engineering Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

Animate DOM and SVG elements with GSAP core tweens and utilities.

Community
Intermediate
yonetim258852yonetim258852

gsap-scrolltrigger

Create scroll-driven animations with GSAP and ScrollTrigger for DOM, SVG, Canvas, and WebGL.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

Community
Advanced
xingBaGanxingBaGan

gsap-core

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

Community
Advanced