gsap-utils

Transform and constrain numeric, color, and collection values for GSAP animations.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-utils-danielv-94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-utils
Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/gsap-utils
Command: npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-utils-danielv-94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a concise set of pure helper utilities to transform, constrain, normalize, and parse values commonly used in GSAP-driven animations so developers don't reimplement math, unit handling, or collection utilities for tweens and ScrollTrigger handlers.

Core Features & Use Cases

  • clamp, mapRange, and normalize for constraining and converting numeric ranges, ideal for mapping scroll progress to animation ranges.
  • interpolate and splitColor for blending numbers and colors in tweens and transitions.
  • random, shuffle, and distribute for deterministic or reusable randomness and staggered distributions.
  • snap, wrap, wrapYoyo, toArray, selector, getUnit, and unitize for grid-snapping, cyclic values, selector scoping, and unit-aware value construction.
  • Use Case: convert a ScrollTrigger progress value into a snapped rotation in degrees, pick randomized start positions for a staggered animation, or convert CSS values with units before interpolating.

Quick Start

Map the page scroll progress to a 0–360 rotation using gsap.utils.mapRange and clamp to produce a reusable mapping function.

Frequently Asked Questions about gsap-utils

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

FAQPage Schema
How do I map scroll progress to a rotation range in GSAP?▼

You can map scroll progress to a rotation range in GSAP using mapRange and clamp, which convert a normalized 0-1 ScrollTrigger progress value into a specific output range like 0-360 degrees.

How do I normalize and constrain numeric values for GSAP tweens?▼

Normalize and constrain numeric values for GSAP tweens using normalize to convert inputs to a 0-1 scale, and clamp to restrict values within defined minimum and maximum boundaries.

Can I snap animation values to a grid using GSAP utilities?▼

Yes, you can snap animation values to a grid using the snap utility, which constrains numeric values to specific increments or grid points for precise motion control in tweens.

How do I interpolate colors and numbers in GSAP transitions?▼

Interpolate colors and numbers in GSAP transitions using interpolate for blending numeric values and splitColor for blending colors, enabling smooth transitions between states in tweens.

Do I need GSAP installed to use these utility functions?▼

Yes, you need GSAP installed to use these utility functions, as they are designed to constrain, parse, and transform values specifically for GSAP-driven animations, ScrollTrigger handlers, and tweens.

Best way to randomize start positions for staggered GSAP animations?▼

The best way to randomize start positions for staggered GSAP animations is using the random and distribute utilities, which provide reusable randomness and staggered distributions across collections.