Todas las funciones utilitarias de GSAP con ejemplos prácticos para animaciones web avanzadas.
clamp()Restringe un valor entre min y max. Omitir value devuelve una función reutilizable.
mapRange()Mapea un valor de un rango a otro. Perfecto para scroll → posición, progreso → grados.
normalize()Normaliza un valor a 0–1 dentro de un rango. Inverso de mapRange cuando el destino es 0–1.
interpolate()Interpola entre dos valores al progreso dado (0–1). Soporta números, colores y objetos.
random()Valor aleatorio en rango o elemento de array. Pasar true como último arg devuelve función reutilizable.
snap()Ajusta un valor al múltiplo más cercano o al valor más próximo en un array.
shuffle()Devuelve un array con los mismos elementos en orden aleatorio. Útil para staggers aleatorios.
wrap()Envuelve un valor en el rango min–max (min inclusivo, max exclusivo). Para scroll infinito o valores cíclicos.
wrapYoyo()Envuelve con efecto yoyo (rebota en los extremos). Para animaciones de ida y vuelta dentro de un rango.
pipe()Compone funciones: pipe(f1, f2, f3)(value) aplica f1→f2→f3 en cadena. Perfecto para transformaciones encadenadas.
distribute()Distribuye valores entre múltiples targets. Útil para staggers avanzados, escala desde el centro, etc.
toArray()Convierte cualquier tipo (selector, NodeList, elemento) a un Array real.
selector()Devuelve una función selectora con scope a un contenedor. Ideal para componentes React/Vue.
getUnit() unitize()Extrae o añade unidades a valores. Útil al construir valores CSS dinámicos.
| Función | Devuelve función si omites value | Caso de uso principal | Ejemplo |
|---|---|---|---|
| clamp(min,max) | Sí | Evitar overflow de valores | clamp(0,1, 1.5) → 1 |
| mapRange(…) | Sí | Scroll pos → propiedad CSS | mapRange(0,1,0,360, 0.5) → 180 |
| normalize(min,max) | Sí | Obtener progreso 0–1 | normalize(0,100, 75) → 0.75 |
| interpolate(a,b) | Sí | Lerp números, colores, objetos | interpolate(0,100, 0.5) → 50 |
| random(min,max) | Pasar true al final | Valores aleatorios por elemento | random(-100,100,5,true)() |
| snap(to) | Sí | Grid / paso fijo | snap(25, 38) → 25 |
| shuffle(arr) | No (devuelve array) | Orden aleatorio de targets | shuffle([a,b,c]) → [c,a,b] |
| wrap(min,max) | Sí | Scroll infinito, ciclos | wrap(0,360, 400) → 40 |
| wrapYoyo(min,max) | Sí | Péndulo, rebote | wrapYoyo(0,100, 150) → 50 |
| pipe(...fns) | Siempre función | Componer transformaciones | pipe(norm, map, snap)(55) |
| distribute(config) | Siempre función | Staggers avanzados | {base,amount,from:"center"} |
| toArray(sel) | No | NodeList → Array real | toArray(".item") → [] |
| selector(scope) | No (devuelve fn) | Selects scoped (React/Vue) | q(".box") dentro de ref |
| getUnit(val) | No | Detectar unidad CSS | getUnit("2rem") → "rem" |
| unitize(num,unit) | No | Añadir unidad si falta | unitize(100,"px") → "100px" |
| splitColor(color) | No | Acceder a canales RGB/HSL | splitColor("#fff") → [255,255,255] |
value para obtener función reutilizable cuando el mismo rango se usa muchas veces (handler de scroll, callback de tween).snap() para valores alineados a grid o pasos fijos.selector(scope) en componentes para evitar seleccionar elementos de otros componentes.pipe() para encadenar normalize → mapRange → snap en una sola función limpia.toArray() siempre que GSAP o tu código necesite un Array real (no NodeList).mapRange o normalize manejan unidades CSS — solo trabajan con números. Usar getUnit / unitize cuando importen las unidades.random() con función reutilizable omitiendo el valor — a diferencia de otras utils, debes pasar true como último argumento.