In the Skill's Own Terms
gsap.utils is GSAP's set of pure helper functions for math, ranges, units, colors, and collections, and it needs no registration. The skill documents clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap, and wrapYoyo with their signatures, defaults, and worked outputs.
It is for developers writing or reviewing GSAP code that must map scroll to a value, normalize inputs, snap to a grid, or scope selectors in a component. One pattern runs through the file: omit the trailing value to get a reusable function, except random(), which takes true.
What it produces
- The transformed value, returned directly when you pass the value argument
- A reusable function that clamps, maps, normalizes or snaps values you hand it later
- A new array with the same elements in random order
- A scoped selector function that only finds elements inside the given element or ref
How It Works
- 01Helpers Live on gsap.utils
The utils are pure helpers that need no registration and can be called anywhere JS drives GSAP: tween vars, ScrollTrigger or Observer callbacks.
- 02Pass the Value Last, Get the Result Now
Most utils take their config first and the value to transform as the final argument, returning the transformed result immediately.
- 03Leave It Off for a Function Form
Omit that final value and the util hands back a function you call later with the value, so one config can serve many values.
- 04Remember Random() Flips the Pattern
random() does not use omission for its reusable form; you pass true as the last argument and get a function returning a fresh value each call.
- 05Snap Can Be Set in the Tween Itself
For grid or step-based motion you can pass snap directly in tween vars rather than calling the util first.
- 06Chain Transforms with Pipe
pipe composes functions left to right, so normalize then snap can be applied as a single function inside a tween or callback.