Utility Methods

---

GSAP's utility methods can be surprisingly helpful. Note that many of them can optionally return FUNCTIONS so that they can be plugged directly into tweens, leveraging GSAP's function-based capabilities. In that case, they'll get called once for each target rather than just using the same end value for them all.

Video

combining utility methods

Available Utils

Prefixes the proved CSS property if necessary

Clamp a value to fit within a specific range clamp(0, 100, -12) -> 0

Distribute a value among an array of objects either linearly or according to their position in a grid, optionally with easing applied.

Get the unit of a string getUnit("30px") --> "px".

Interpolate between almost any two values (numbers, colors, strings, arrays, complex strings, or even objects with multiple properties) ex interpolate("red", "blue", 0.5) --> "rgba(128,0,128,1)").

Map one range to another ex mapRange(-10, 10, 0, 100, 5) --> 75)

Map a number within a range to a progress between 0 to 1 ex normalize(100, 200, 150) --> 0.5)

Sequence a number of function calls, passing the result of each into the next ex pipe(clamp(0, 100), snap(5))(8) --> 10

Generate a random number based on parameters ex random(0, 100, 5) --> 65) or randomly pick an element from in a supplied array ex. random(["red", "green", "blue"]) --> "red"

Returns a selector function that is scoped to a particular Element (or React ref or Angular ElementRef). ex selector(myElement)

Shuffles the contents of an array in-place. ex shuffle([1, 2, 3, 4, 5]) --> [4, 2, 1, 5, 3])

Snap a value to either an increment ex snap(5, 13) --> 15 or to the closest value in an array ex snap([0, 5, 10], 7) --> 5.

Split any color into its red, green, blue (and optionally alpha) components. Or hue, saturation, and brightness. ex splitColor("red") --> [255, 0, 0])

Convert almost any array-like object to an array, including selector text! ex - toArray(".class") --> [element1, element2].

Wraps around another utility function, allowing it to accept values with units like "20px" or "50%", stripping off the unit when feeding into the wrapped utility function, and then adding it back to the result ex. var wrap = gsap.utils.unitize( gsap.utils.wrap(0, 100) ) wrap("150px"); --> "50px". Or force a specific unit ex unitize( gsap.utils.mapRange(-10, 10, 0, 100), "%"); --> always returns with "%".

Returns the next item in an array or number in a range after the given index. Or returns a function that returns that object or value if no index is given.

Returns the element in an Array associated with the provided index or a number in a provided range, going backwards once the last index is reached (yoyo-ing). Or if no value to wrap is provided, it returns a reusable function that will do the wrapping accordingly when it's fed a value.

checkPrefix

clamp

distribute

getUnit

interpolate

mapRange : Number

normalize

pipe

random

selector

shuffle

snap

splitColor

toArray

unitize

wrap

wrapYoyo