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.