GSAP + SVG: coreografiar tus vectores

En el módulo 12 dibujaste y animaste SVG con CSS. GSAP lleva esos vectores a otro nivel: coreografía logos que se ensamblan, controla el trazado con precisión total, y —regalo enorme— resuelve SOLO la trampa del transform-origin en SVG que tanto cuidamos a mano. Vector y motor de animación, juntos, son la fórmula de los logos animados de los mejores sitios.

El mismo trazo del módulo 12, ahora coreografiado

GSAP anima strokeDashoffset igual que hiciste con CSS, pero dentro de una timeline con control total. Con el truco de pathLength="1" del módulo 12, todo es en fracciones:

Es el logo "Vértice" del reto del módulo 12, pero ahora la SECUENCIA la dirige una timeline: marco, luego sol, luego cordillera, con solapamientos de -=0.3, y un botón que lo redibuja. El gsap.set para reduced-motion lo deja dibujado y quieto — la empatía de siempre.

El regalo: GSAP arregla el transform-origin de SVG

¿Recuerdas la trampa del módulo 12 —que en SVG el transform-origin se mide contra la esquina del lienzo, y necesitabas transform-box: fill-box? GSAP lo resuelve por ti:

// girar una parte del SVG sobre SU centro: GSAP maneja el origin internamente
gsap.to(".engranaje", {
rotation: 360, transformOrigin: "center center",   // ← GSAP lo interpreta bien en SVG
duration: 3, repeat: -1, ease: "none",
});
// sin pelear con transform-box: fill-box — GSAP normaliza el comportamiento del SVG

Con transformOrigin: "center center", GSAP hace que la parte gire sobre su propio centro dentro del SVG, sin la gimnasia de transform-box que el CSS exigía. Es una de esas cosas que, una vez usas GSAP para SVG, no quieres volver a hacer a mano.

Mini-reto

Toma el logo que vectorizaste en el reto del módulo 12 (o el corazón del módulo 9) y anímalo con una timeline de GSAP: que se dibuje parte por parte y, al terminar, que UNA pieza haga un pequeño scale de acento con back.out. Añade el botón de repetir y el gsap.set de reduced-motion. Ver tu propio logo cobrar vida bajo la dirección de GSAP es el mejor cierre antes del proyecto.

Qué sigue

Tienes TODO el arsenal de GSAP: tweens, timelines, ScrollTrigger, efectos insignia, micro-interacciones y SVG. El proyecto final del módulo los une en la pieza definitiva: una landing con scrollytelling completo —pin, scrub y parallax— del tipo que gana un Awwwards. Tu portafolio está a punto de subir de nivel.