gsap-utils
Utility functions like clamp, mapRange, interpolate, snap, selector...
Developer Setup
Setup & Installation
npx skills add https://github.com/greensock/gsap-skills --skill gsap-utilsnpx skills add https://github.com/greensock/gsap-skills --skill gsap-utilsOverview
What This Skill Does
Utility functions like clamp, mapRange, interpolate, snap, selector, and wrap
Application
When to use this Skill
- Integrating gsap utils into your development workflow.
- Following best practices for utility functions like clamp, maprange, interpolate, snap, selector, and wrap.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
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
// Without value: returns a function you call with the value later
let c = gsap.utils.clamp(0, 100);
c(150); // 100
c(-10); // 0
Clamping and Ranges
Recommendations