Mi guía visual de consulta rápida para animar ilustraciones.
Objetivo: Hacer que un elemento aparezca desde la nada con un rebote orgánico.
Fórmula: Usar gsap.from() con scale: 0 y ease: "back.out". Nota cómo el punto de pivote (transformOrigin) se centra para que crezca desde su propio eje.
Objetivo: Crear un movimiento infinito y suave (ideal para nubes, destellos o personajes flotando).
Fórmula: Usar yoyo: true y repeat: -1 (infinito) combinando un ease: "sine.inOut" para que no se detenga de golpe al cambiar de dirección.
Objetivo: Que una parte de la ilustración reaccione dinámicamente cuando el usuario pasa el cursor por encima.
Fórmula: Escuchar los eventos mouseenter y mouseleave en JS, disparando un gsap.to() para inflar y desinflar el vector suavemente.
Objetivo: Animar las partes de un SVG en un orden específico, una detrás de otra, sin usar retrasos manuales.
Fórmula: Crear un gsap.timeline() y encadenar los movimientos. El parámetro "-=0.4" hace que la siguiente pieza empiece un poco antes de que termine la anterior.
Objetivo: Que la animación del SVG avance o retroceda exactamente al ritmo que el usuario mueve la rueda del mouse.
Fórmula: En el scrollTrigger, activar scrub: true (o un número como 1 para que sea más fluido). El vector rotará y cambiará de color según el scroll.
Objetivo: Que la ilustración esté quieta y se reproduzca sola una única vez cuando el usuario llegue a esa sección de la web.
Fórmula: Usar scrollTrigger pero SIN la propiedad scrub. De esta forma, al cruzar la línea del 80% de la pantalla, la animación se dispara a su propio ritmo constante.
Objetivo: Hacer que una pieza rote desde su base (como un brazo, una palanca o una aguja) y no desde el centro.
Fórmula: Usar porcentajes exactos en transformOrigin. Por ejemplo, "bottom center" o "10% 50%" obliga al vector a fijar su bisagra en ese punto exacto.
Objetivo: Dar peso y plasticidad a un personaje u objeto simulando que se aplasta y se estira al rebotar.
Fórmula: Animar simultáneamente scaleX y scaleY con valores inversos (si uno sube, el otro baja) fijando el pivote en la base ("center bottom").
Objetivo: Que partes de la ilustración (como pupilas, linternas o destellos) apunten sutilmente hacia donde el usuario mueve el mouse en esa sección.
Fórmula: Capturar las coordenadas clientX/Y del mouse, normalizarlas y usar un gsap.to() rápido para desplazar los vectores en los ejes X e Y de forma contenida.
Objetivo: Bloquear la pantalla para que el usuario no pueda bajar temporalmente, obligándolo a ver una animación interna completa mientras hace scroll.
Fórmula: En el scrollTrigger, añadir pin: true. La página se detiene y la figura se desplaza horizontalmente por el lienzo antes de liberar el scroll.
Objetivo: Animar un grupo de elementos idénticos (como barras de gráficos, hojas de árboles o partículas) de forma secuencial con una sola línea de código.
Fórmula: Usar una clase común (.barra) como objetivo y añadir la propiedad stagger: 0.1 para que GSAP cree el retraso automático entre cada elemento.
Objetivo: Animar números numéricos dentro de un SVG o interfaz (ideal para infografías, estadísticas o pantallas tecnológicas).
Fórmula: GSAP no solo anima vectores, puede animar cualquier objeto virtual. Creamos un contador numérico en JS y usamos onUpdate para pintar el valor en tiempo real.
Objetivo: Hacer que los contornos de un SVG se vayan dibujando solos de forma progresiva en la pantalla.
Fórmula: Usar las propiedades nativas de CSS strokeDasharray y strokeDashoffset. Al reducirlas a cero con GSAP, la línea simula trazarse mágicamente.
Objetivo: Crear un efecto de profundidad donde la ilustración vectorizada rota en un espacio tridimensional simulado según la posición del cursor.
Fórmula: Activar la propiedad transformPerspective en el contenedor y animar las rotaciones en los ejes geométricos rotateX y rotateY de manera cruzada.
Objetivo: Que el objeto no solo reaccione a la posición del scroll, sino a la fuerza o rapidez con la que el usuario mueve la rueda del mouse (se deforma si scrolleas rápido, se aquieta si vas lento).
Fórmula: Utilizar el método avanzado ScrollTrigger.getVelocity() dentro de un bucle de refresco continuo para alterar el diseño en base a la inercia.
Objetivo: Dar profundidad espacial a un paisaje o composición haciendo que el fondo se mueva más lento que el primer plano al hacer scroll.
Fórmula: Vincular múltiples capas del mismo SVG al mismo scrollTrigger, pero asignándoles diferentes distancias o multiplicadores de movimiento en y.
Objetivo: Animar las paradas de color (*color stops*) de un degradado interno de un SVG para lograr fondos líquidos que mutan de color de forma continua.
Fórmula: Animar directamente los atributos stop-color de las etiquetas de los gradientes en el bloque <defs> mediante un bucle infinito.
Objetivo: Crear un efecto de interfaz interactiva avanzada donde un elemento se "engancha" y sigue al cursor cuando este se acerca a su zona de acción.
Fórmula: Medir la distancia entre el cursor y el centro del objeto; si entra en el rango, el elemento se desplaza sutilmente hacia las coordenadas exactas del puntero.
Objetivo: Hacer que un texto emerja desde el "suelo" de una línea invisible, un efecto muy premium en agencias de diseño.
Fórmula: Envolver el texto en un contenedor con overflow: hidden en CSS. Con GSAP, movemos el texto en el eje Y desde un valor positivo (abajo) hacia su posición original.
Objetivo: Simular que el texto se va digitando letra por letra de forma automática, incluyendo el cursor parpadeante.
Fórmula: Usar el plugin gratuito de GSAP llamado TextPlugin. Este plugin modifica directamente el contenido de texto del HTML a lo largo del tiempo.
Objetivo: Dibujar las siluetas de las letras de un texto vectorizado antes de rellenarlas de color.
Fórmula: Usar la etiqueta <text> de SVG con bordes (stroke) y sin relleno. Aplicamos el truco del strokeDashoffset para dibujarlo y luego un fill final.
Objetivo: Hacer que una frase u oración viaje y fluya a lo largo de una línea curva u onda matemática al hacer scroll por la página.
Fórmula: Utilizar la etiqueta SVG <textPath> vinculada a un id de un camino (<path>). GSAP anima el atributo startOffset para desplazar las palabras por la ola.
Objetivo: Un bloque sólido de color cruza velozmente sobre el texto; cuando el bloque se retira, el texto queda revelado debajo.
Fórmula: Un elemento absoluto (el bloque) cubre el texto. Con un Timeline, estiramos el ancho del bloque de 0 a 100% para tapar el texto, y luego cambiamos su punto de origen para encogerlo de 100 a 0 hacia el otro lado.
Fin de la página