Chapter 35: gsap.utils

Core Idea

gsap.utils is a collection of standalone helper functions for math and data tasks (clamping, mapping ranges, interpolation, snapping, etc.), usable independently of any tween.

Key Concepts

• Function-based return option: many utilities can return a function instead of a value, so they can be plugged directly into a tween's property value and get invoked once per target.
• Notable utilities: clamp() (constrain to a range), mapRange() (remap one range to another), normalize() (map a value to 0-1 progress), interpolate() (blend between almost any two values — numbers, colors, strings, arrays, objects), pipe() (chain utility calls together), distribute() (spread a value across an array of objects, optionally with easing), getUnit() (extract a value's unit), checkPrefix() (resolve a vendor-prefixed CSS property name).
• Full list: each utility (checkPrefix, clamp, distribute, getUnit, interpolate, mapRange, normalize, pipe, random, selector, shuffle, snap, splitColor, toArray, unitize, wrap, wrapYoyo) has its own chapter.

Code Examples

gsap.utils.clamp(0, 100, -12); // 0
gsap.utils.mapRange(-10, 10, 0, 100, 5); // 75
gsap.utils.interpolate("red", "blue", 0.5); // "rgba(128,0,128,1)"
gsap.utils.pipe(gsap.utils.clamp(0, 100), gsap.utils.snap(5))(8); // 10

• What it demonstrates: four different utilities used standalone, including chaining two of them together with pipe().

Key Takeaways

1. These are general-purpose helpers, not tied to tweens — use them for any numeric/data transformation task in a project, animated or not.
2. When a utility is used as a function-based tween value, it's called once per target rather than sharing one computed value across all of them.

Connects To

• Individual Utility Methods chapters: each function listed above has a dedicated chapter with full parameters and examples.