gsap-utils

SKILL.md

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

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