gsap-utils

Name: gsap-utils
Author: calesthio

41kstars4.9kforks

How to install gsap-utils?

calesthio/openmontage/gsap-utils

$npx -y skills add calesthio/OpenMontage --skill gsap-utils

Installs into the current project.

Summary

Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.

Files · 1

View on GitHub

SKILL.md

1	# gsap.utils
2
3	## When to Use This Skill
4
5	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).
6
7	Related skills: Use with gsap-core, gsap-timeline, and gsap-scrolltrigger when building animations; CustomEase and other easing utilities are in gsap-plugins.
8
9	## Overview
10
11	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()`).
12
13	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()](https://gsap.com/docs/v3/GSAP/UtilityMethods/random()).
14
15	```javascript
16	// With value: returns the result
17	gsap.utils.clamp(0, 100, 150); // 100
18
19	// Without value: returns a function you call with the value later
20	let c = gsap.utils.clamp(0, 100);
21	c(150); // 100
22	c(-10); // 0
23	```
24
25	## Clamping and Ranges
26
27	### clamp(min, max, value?)
28
29	Constrains a value between min and max. Omit value to get a function: `clamp(min, max)(value)`.
30
31	```javascript
32	gsap.utils.clamp(0, 100, 150); // 100
33	gsap.utils.clamp(0, 100, -10); // 0
34
35	let clampFn = gsap.utils.clamp(0, 100);
36	clampFn(150); // 100
37	```
38
39	### mapRange(inMin, inMax, outMin, outMax, value?)
40
41	Maps a value from one range to another. Use when converting scroll position, progress (0–1), or input range to an animation range. Omit value to get a function: `mapRange(inMin, inMax, outMin, outMax)(value)`.
42
43	```javascript
44	gsap.utils.mapRange(0, 100, 0, 500, 50); // 250
45	gsap.utils.mapRange(0, 1, 0, 360, 0.5); // 180 (progress to degrees)
46
47	let mapFn = gsap.utils.mapRange(0, 100, 0, 500);
48	mapFn(50); // 250
49	```
50
51	### normalize(min, max, value?)
52
53	Returns a value normalized to 0–1 for the given range. Inverse of mapping when the target range is 0–1. Omit value to get a function: `normalize(min, max)(value)`.
54
55	```javascript
56	gsap.utils.normalize(0, 100, 50); // 0.5
57	gsap.utils.normalize(100, 300, 200); // 0.5
58
59	let normFn = gsap.utils.normalize(0, 100);
60	normFn(50); // 0.5
61	```
62
63	### interpolate(start, end, progress?)
64
65	Interpolates between two values at a given progress (0–1). Handles numbers, colors, and objects with matching keys. Omit progress to get a function: `interpolate(start, end)(progress)`.
66
67	```javascript
68	gsap.utils.interpolate(0, 100, 0.5); // 50
69	gsap.utils.interpolate("#ff0000", "#0000ff", 0.5); // mid color
70	gsap.utils.interpolate({ x: 0, y: 0 }, { x: 100, y: 50 }, 0.5); // { x: 50, y: 25 }
71
72	let lerp = gsap.utils.interpolate(0, 100);
73	lerp(0.5); // 50
74	```
75
76	## Random and Snap
77
78	### random(minimum, maximum[, snapIncrement, returnFunction]) / random(array[, returnFunction])
79
80	Returns a random number in the range minimum–maximum, or a random element from an array. Optional snapIncrement snaps the result to the nearest multiple (e.g. `5` → multiples of 5). To get a reusable function, pass true as the last argument (returnFunction); the returned function takes no args and returns a new random value each time. This is the only util that uses `true` for the function form instead of omitting the value.
81
82	```javascript
83	// immediate value: number in range
84	gsap.utils.random(-100, 100); // e.g. 42.7
85	gsap.utils.random(0, 500, 5); // 0–500, snapped to nearest 5
86
87	// reusable function: pass true as last argument
88	let randomFn = gsap.utils.random(-200, 500, 10, true);
89	randomFn(); // random value in range, snapped to 10
90	randomFn(); // another random value
91
92	// array: pick one value at random
93	gsap.utils.random(["red", "blue", "green"]); // "red", "blue", or "green"
94	let randomFromArray = gsap.utils.random([0, 100, 200], true);
95	randomFromArray(); // 0, 100, or 200
96	```
97
98	String form in tween vars: use `"random(-100, 100)"`, `"random(-100, 100, 5)"`, or `"random([0, 100, 200])"`; GSAP evaluates it per target.
99
100	```javascript
101	gsap.to(".box", { x: "random(-100, 100, 5)", duration: 1 });
102	gsap.to(".item", { backgroundColor: "random([red, blue, green])" });
103	```
104
105	### snap(snapTo, value?)
106
107	Snaps a value to the nearest multiple of snapTo, or to the nearest value in an array of allowed values. Omit value t

People who liked this also viewed

6 picks

Type

gsap-utils

41kstars4.9kforks

View on GitHub

How to install gsap-utils?

calesthio/openmontage/gsap-utils

$npx -y skills add calesthio/OpenMontage --skill gsap-utils

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# gsap.utils
2
3	## When to Use This Skill
4
5	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).
6
7	Related skills: Use with gsap-core, gsap-timeline, and gsap-scrolltrigger when building animations; CustomEase and other easing utilities are in gsap-plugins.
8
9	## Overview
10
11	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()`).
12
13	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()](https://gsap.com/docs/v3/GSAP/UtilityMethods/random()).
14
15	```javascript
16	// With value: returns the result
17	gsap.utils.clamp(0, 100, 150); // 100
18
19	// Without value: returns a function you call with the value later
20	let c = gsap.utils.clamp(0, 100);
21	c(150); // 100
22	c(-10); // 0
23	```
24
25	## Clamping and Ranges
26
27	### clamp(min, max, value?)
28
29	Constrains a value between min and max. Omit value to get a function: `clamp(min, max)(value)`.
30
31	```javascript
32	gsap.utils.clamp(0, 100, 150); // 100
33	gsap.utils.clamp(0, 100, -10); // 0
34
35	let clampFn = gsap.utils.clamp(0, 100);
36	clampFn(150); // 100
37	```
38
39	### mapRange(inMin, inMax, outMin, outMax, value?)
40
41	Maps a value from one range to another. Use when converting scroll position, progress (0–1), or input range to an animation range. Omit value to get a function: `mapRange(inMin, inMax, outMin, outMax)(value)`.
42
43	```javascript
44	gsap.utils.mapRange(0, 100, 0, 500, 50); // 250
45	gsap.utils.mapRange(0, 1, 0, 360, 0.5); // 180 (progress to degrees)
46
47	let mapFn = gsap.utils.mapRange(0, 100, 0, 500);
48	mapFn(50); // 250
49	```
50
51	### normalize(min, max, value?)
52
53	Returns a value normalized to 0–1 for the given range. Inverse of mapping when the target range is 0–1. Omit value to get a function: `normalize(min, max)(value)`.
54
55	```javascript
56	gsap.utils.normalize(0, 100, 50); // 0.5
57	gsap.utils.normalize(100, 300, 200); // 0.5
58
59	let normFn = gsap.utils.normalize(0, 100);
60	normFn(50); // 0.5
61	```
62
63	### interpolate(start, end, progress?)
64
65	Interpolates between two values at a given progress (0–1). Handles numbers, colors, and objects with matching keys. Omit progress to get a function: `interpolate(start, end)(progress)`.
66
67	```javascript
68	gsap.utils.interpolate(0, 100, 0.5); // 50
69	gsap.utils.interpolate("#ff0000", "#0000ff", 0.5); // mid color
70	gsap.utils.interpolate({ x: 0, y: 0 }, { x: 100, y: 50 }, 0.5); // { x: 50, y: 25 }
71
72	let lerp = gsap.utils.interpolate(0, 100);
73	lerp(0.5); // 50
74	```
75
76	## Random and Snap
77
78	### random(minimum, maximum[, snapIncrement, returnFunction]) / random(array[, returnFunction])
79
80	Returns a random number in the range minimum–maximum, or a random element from an array. Optional snapIncrement snaps the result to the nearest multiple (e.g. `5` → multiples of 5). To get a reusable function, pass true as the last argument (returnFunction); the returned function takes no args and returns a new random value each time. This is the only util that uses `true` for the function form instead of omitting the value.
81
82	```javascript
83	// immediate value: number in range
84	gsap.utils.random(-100, 100); // e.g. 42.7
85	gsap.utils.random(0, 500, 5); // 0–500, snapped to nearest 5
86
87	// reusable function: pass true as last argument
88	let randomFn = gsap.utils.random(-200, 500, 10, true);
89	randomFn(); // random value in range, snapped to 10
90	randomFn(); // another random value
91
92	// array: pick one value at random
93	gsap.utils.random(["red", "blue", "green"]); // "red", "blue", or "green"
94	let randomFromArray = gsap.utils.random([0, 100, 200], true);
95	randomFromArray(); // 0, 100, or 200
96	```
97
98	String form in tween vars: use `"random(-100, 100)"`, `"random(-100, 100, 5)"`, or `"random([0, 100, 200])"`; GSAP evaluates it per target.
99
100	```javascript
101	gsap.to(".box", { x: "random(-100, 100, 5)", duration: 1 });
102	gsap.to(".item", { backgroundColor: "random([red, blue, green])" });
103	```
104
105	### snap(snapTo, value?)
106
107	Snaps a value to the nearest multiple of snapTo, or to the nearest value in an array of allowed values. Omit value t

People who liked this also viewed

6 picks

Type