要点
Pure utility functions for math, value mapping, randomization, array handling, and unit parsing in GSAP animations.
- Provides 15+ helpers including clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, and pipe for transforming values in tweens and callbacks
- Most utilities support a function-form pattern: omit the final value argument to get a reusable function (e.g.,
clamp(0, 100)returns a function you call later with values) - Includes color parsing (splitColor), unit detection (getUnit, unitize), grid-based value distribution (distribute), and scoped DOM selection (selector, toArray)
- Works in tween variables, ScrollTrigger callbacks, and any JavaScript driving GSAP animations; no registration required
SKILL.md
gsap.utils
When to Use This Skill
Apply when writing or reviewing code that uses gsap.utils for math, array/collection handling, unit parsing, or value mapping in animations (e.g. mapping scroll to a value, randomizing, snapping to a grid, or normalizing inputs).
Related skills: Use with gsap-core, gsap-timeline, and gsap-scrolltrigger when building animations; CustomEase and other easing utilities are in gsap-plugins.
Overview
gsap.utils provides pure helpers; no need to register. Use in tween vars (e.g. function-based values), in ScrollTrigger or Observer callbacks, or in any JS that drives GSAP. All are on gsap.utils (e.g. gsap.utils.clamp()).
Omitting the value: function form. Many utils accept the value to transform as the last argument. If you omit that argument, the util returns a function that accepts the value later. Use the function form when you need to clamp, map, normalize, or snap many values with the same config (e.g. in a mousemove handler or tween callback). Exception: random() — pass true as the last argument to get a reusable function (do not omit the value); see random().
// With value: returns the result
gsap.utils.clamp(0, 100, 150); // 100