Laboratorio de Animación SVG + GSAP

Mi guía visual de consulta rápida para animar ilustraciones.

1. Entrada Elástica (Pop In)

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.

2. Flotación Orgánica (Loop)

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.

3. Reacción al Mouse (Hover)

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.

4. Secuencia Coreografiada (Timeline)

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.

5. Control Total por Scroll (Scrub)

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.

6. Disparo Único al Entrar en Pantalla

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.

7. Rotación con Eje Personalizado (Pivote)

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.

8. Deformación Elástica (Squash & Stretch)

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").

9. Ojos/Elementos que Siguen al Cursor

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.

10. Fijación de Pantalla (Scroll Pinning)

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.

11. Cascada Escalonada Directa (Stagger)

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.

12. Animación de Valores y Texto Lumínico

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.

0%

13. Efecto Dibujado a Mano (Stroke Dash)

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.

14. Falsa Perspectiva 3D al Mover el Mouse

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.

15. Animación Reactiva a la Velocidad del Scroll

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.

16. Efecto Parallax en Capas Internas

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.

17. Transición Fluida de Gradientes Dinámicos

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.

18. Efecto de Atracción Magnética

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.

19. Revelado por Máscara (Overflow Hidden)

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.

CREATIVIDAD

20. Efecto Máquina de Escribir Auténtico

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.

|

21. Marquesina de Texto Infinita (Marquee)

Objetivo: Crear una cinta de texto gigante que corre de lado a lado de la pantalla sin detenerse y de forma fluida.

Fórmula: Clonar el texto horizontalmente y moverlo en el eje X un -50% de su ancho con un ease: "none" para que no haya tirones ni pausas.

DISEÑO • ILUSTRACIÓN • DESARROLLO • MINTGRIDS • DESIGN • ILLUSTRATION • 
DISEÑO • ILUSTRACIÓN • DESARROLLO • MINTGRIDS • DESIGN • ILLUSTRATION • 

22. Contorno de Texto SVG Dibujándose

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.

MINT

23. Texto SVG sobre Curva Sincronizado al Scroll

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.

TEXTO EN ONDA INTERACTIVA •

24. Revelado por Bloque de Color (Cinemático)

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.

STUDIO

Fin de la página