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.
Diseño de sistemas de identidad corporativa con enfoque abstracto y funcional.
Vectores optimizados de alta fidelidad, listos para interfaces interactivas y animación.
El núcleo creativo donde la geometría matemática se encuentra con el arte visual.
Lleva tu marca al siguiente nivel visual. Cuéntame sobre tu proyecto.
Estructuras tipográficas que juegan con la dirección física del movimiento.
Efecto cinemático donde cada renglón rota sobre su propio eje como un bloque sólido.
Barridos cromáticos individuales que exponen el texto de manera secuencial.
Las letras nacen expandidas y se contraen elegantemente al tomar su posición final.
Objetivo: Combinar múltiples lógicas en una sola escena. El triángulo flota solo (2), el cuadrado reacciona al scroll (5) y el círculo reacciona al mouse (3).
Fin de la página