gsap-utilities

Applies GSAP utility functions for math operations, data transformations, and animation value processing.

52|3|Updated Aug 20, 2026
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-utilities-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utilities
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-utilities
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-utilities-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing animation logic often requires repetitive math like clamping values, mapping ranges, interpolating colors, and generating random values. This Skill provides ready-to-use patterns for GSAP's built-in utility functions so you avoid reimplementing common transformation logic. ## Core Features & Use Cases - Math & Range Utilities: Use clamp, mapRange, normalize, snap, and wrap to control values feeding into tweens and ScrollTrigger callbacks. - Transformation & Color Utilities: Chain operations with pipe, blend values and colors with interpolate, and distribute values across element collections for staggered layouts. - Use Case: When building a scroll-driven parallax section, map scroll progress to element positions with mapRange, clamp the result to safe bounds, and interpolate background colors across sections. ## Quick Start Use the gsap-utilities skill to map scroll progress to an element's x position with clamping and color interpolation.

Frequently Asked Questions about gsap-utilities

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map a value from one range to another in GSAP?▼

Use gsap.utils.mapRange(inMin, inMax, outMin, outMax, value) to convert a value between ranges, such as mapping scroll progress 0-1 to a pixel position 0-500. Calling it without the final value returns a reusable mapping function.

How to clamp animation values in GSAP?▼

Use gsap.utils.clamp(min, max, value) to restrict a value within bounds before feeding it into a tween. Omitting the value argument returns a reusable clamping function you can cache for repeated use.

Does GSAP have a random number utility for animations?▼

Yes, gsap.utils.random(min, max, increment) generates random numbers, optionally snapped to an increment, and can also pick a random item from an array. Evaluate it once before the tween rather than expecting per-frame randomness.

Can I chain multiple GSAP utility functions together?▼

Yes, gsap.utils.pipe composes multiple utility functions into one, passing each output to the next input. For example, pipe a clamp into a mapRange to validate and transform a value in a single call.

Why does my GSAP random animation not change each frame?▼

gsap.utils.random evaluates once when called, producing a single fixed value for the tween. To get varying values per element, call it inside a function-based tween value or a stagger callback.

How do I interpolate between two colors in GSAP?▼

Use gsap.utils.interpolate(startColor, endColor, progress) with hex, named, or rgba colors to get a blended color at a given progress. It also works on numbers and objects with matching properties.