83.3K+Descargar
Ir a la guía de uso
gsap-utilspor GreenSock

GSAP Utils Skill.

Una skill de Claude Code y Codex para motion y video: helpers de gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

  • Movimiento y video
  • Código UI
Descargar OpenDesignVer guía de uso
greensock/gsap-skills · skills/gsap-utils/SKILL.mdSKILL.md
--- name: gsap-utils description: 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. --- ## When to Use This Skill ## Clamping and Ranges ## Random and Snap ## Units and Parsing ## Arrays and Collections ## Best practices
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 12.051 caracteres en total

01 Qué hace

Qué Hace el Skill gsap-utils en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

gsap.utils es el conjunto de funciones auxiliares puras de GSAP para matemáticas, rangos, unidades, colores y colecciones, y no necesita registro. El skill documenta clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap y wrapYoyo con sus firmas, valores predeterminados y resultados trabajados.

Está pensado para desarrolladores que escriben o revisan código GSAP que debe mapear el scroll a un valor, normalizar entradas, ajustar a una cuadrícula o delimitar selectores dentro de un componente. Un patrón recorre todo el archivo: omitir el valor final para obtener una función reutilizable, excepto random(), que recibe true.

Qué produce

  • El valor transformado, devuelto directamente cuando pasas el argumento value
  • Una función reutilizable que limita, mapea, normaliza o ajusta valores que le entregues más tarde
  • Un nuevo array con los mismos elementos en orden aleatorio
  • Una función de selector delimitada que solo encuentra elementos dentro del elemento o ref dado
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Los Helpers Viven en gsap.utils

    Los utils son helpers puros que no necesitan registro y pueden llamarse en cualquier lugar donde JS controle GSAP: tween vars, callbacks de ScrollTrigger u Observer.

  2. 02
    Pasa el Value al Final, Obtén el Resultado Ahora

    La mayoría de los utils toman su configuración primero y el value a transformar como argumento final, devolviendo el resultado transformado de inmediato.

  3. 03
    Omítelo para Obtener una Forma de Función

    Omite ese value final y el util te devuelve una función que llamas más tarde con el value, de modo que una sola configuración puede servir a muchos valores.

  4. 04
    Recuerda que Random() Invierte el Patrón

    random() no usa la omisión para su forma reutilizable; pasas true como último argumento y obtienes una función que devuelve un valor nuevo en cada llamada.

  5. 05
    Snap Puede Configurarse en el Propio Tween

    Para movimiento basado en cuadrícula o pasos, puedes pasar snap directamente en tween vars en lugar de llamar primero al util.

  6. 06
    Encadena Transformaciones con Pipe

    pipe compone funciones de izquierda a derecha, de modo que normalize y luego snap pueden aplicarse como una sola función dentro de un tween o callback.

02 Encuentra tu caso de uso

Cuándo usar el skill gsap-utils

Usar el skill gsap-utils en Claude Code o Codex cuando la tarea sea motion and video de este tipo. Los límites y el ajuste a continuación se toman del propio archivo del skill.

Buen caso de uso

  • Convertir la posición de scroll, un valor de progreso 0-1 u otro rango de entrada en un rango de animación
  • Animar en una cuadrícula o en pasos fijos dentro de un tween
  • Manejo de scroll infinito u otros valores cíclicos con wrap y wrapYoyo
  • Distribuir valores como scale, opacity, x o delay entre muchos elementos a la vez
  • Aleatorizar el orden de los elementos antes de escalonarlos

Conozca los límites

  • Utilidades de easing como CustomEase, que el archivo coloca en gsap-plugins en lugar de gsap.utils
  • Sobrescribir utils o basarse en comportamiento no documentado
  • Construir la animación en sí, que el archivo empareja con gsap-core, gsap-timeline y gsap-scrolltrigger

Qué proporcionar

  • El valor que desea transformarPásalo como argumento final para obtener un resultado de inmediato; omítelo y proporciona el valor más tarde a la función que obtuviste como retorno.
  • Un elemento de ámbito o ref para selector()Pasa un elemento DOM o una ref de framework para que la función selector devuelta solo coincida con los descendientes de este.
  • Una cadena de color para splitColorrgb(), rgba(), hsl(), hsla(), hex y colores con nombre funcionan; pasa true como segundo argumento para obtener componentes HSL en su lugar.
  • Una configuración de distribute, todas las claves opcionalesProporciona los ajustes de dispersión como base, amount o each, from, grid, axis y ease, o déjala vacía para los valores predeterminados.

03 Dentro del skill

Reglas que el skill gsap-utils le da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Omite el valor cuando se repite un rango

    Cuando se reutiliza el mismo rango o configuración, como en un controlador de scroll o un callback de tween, conserva la función devuelta en lugar de reconstruir la configuración en cada llamada.

  2. Usa la forma de cadena aleatoria en las variables del tween

    Escribe "random(-100, 100)", "random(-100, 100, 5)" o "random([0, 100, 200])" como valor de propiedad; GSAP evalúa la cadena por cada target.

  3. Ajusta las cuadrículas con snap, usa toArray para el resto

    Recurre a snap para valores alineados a una cuadrícula o basados en pasos, y usa toArray siempre que GSAP o tu propio código necesite un array real a partir de un selector o NodeList.

  4. Delimita los selectores dentro de componentes

    Llama a gsap.utils.selector(scope) para que un selector como ".box" coincida solo con los descendientes de ese contenedor o ref, en lugar de con todo el documento.

  5. Amount o each, nunca ambos

    En una configuración de distribute, amount reparte un total entre todos los targets (amount 1 sobre 100 targets equivale a 0.01 de separación) mientras que each establece un paso fijo por target, como 0, 1, 2, 3.

  6. mapRange y normalize solo funcionan con números

    No esperes que manejen unidades; cuando las unidades importan, recurre a getUnit o unitize en su lugar.

04 Ponlo a trabajar

Instalar gsap-utils en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar gsap-utils a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-utils

Forma genérica de la CLI skills para skills/gsap-utils/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Use gsap.utils to drive a [scroll-linked effect] in [my component]: map the ScrollTrigger progress from 0-1 to 0-360 and snap the result to the nearest 5, then set the starting x of each [card] with the string form "random(-100, 100, 5)". Scope the selectors to the [container] ref with gsap.utils.selector so they do not match the whole document.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Compara una llamada de muestra con el resultado documentado, como mapRange(0, 100, 0, 500, 50) dando 250
  • Prueba wrap en ambos extremos del rango para confirmar el resultado cíclico
  • Pase un contenedor como segundo argumento de toArray para confirmar que el resultado tiene un ámbito acotado
  • Compruebe que un color RGBA devuelve cuatro elementos en lugar de tres
  • Confirme que getUnit devuelve la cadena de unidad, y una cadena vacía para números sin unidad

En OpenDesign gsap-utils viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Rama main
Archivo de skill
skills/gsap-utils/SKILL.md Checksum de contenido registrado en la verificación; commit aed9cfd
License
MIT De LICENSE; SKILL.md dice "MIT".
Estrellas del repositorio
15.248 Captura de GitHub tomada el 2026-09-14 para todo el repositorio greensock/gsap-skills, que contiene 8 skills en este catálogo. No es una calificación ni un conteo de uso para gsap-utils.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.
La descripción propia del Skill
"Skill oficial de GSAP para gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Usar cuando el usuario pregunte sobre gsap.utils, clamp, mapRange, random, snap, toArray, wrap o utilidades auxiliares en GSAP."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 12.051 caracteres. Lee el archivo completo en GitHub.

GSAP Utils

Ejecuta gsap-utils en una tarea real de Motion y Video.

El skill gsap-utils viene incluido en OpenDesign. Descarga la app, selecciona el skill en Plugins → Skills, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-utils