Ejemplo · SVG

Animación de SVG

Para GSAP el SVG es DOM normal: los trazos se dibujan con DrawSVG, las formas se transforman con MorphSVG y los elementos recorren rutas con MotionPath. Los tres plugins se registran una vez en provideGsap. La forma flotante empieza como el logo de Angular; Transformar la pasa por las demás.

drawSvgMorphSVGMotionPath

<!-- every stroke inside draws in, staggered -->
<svg drawSvg [each]="0.2" viewBox="0 0 400 260">
  <path #track d="M 60 130 C …" />   <!-- ∞ -->
  <path #shape [attr.d]="shapes[0].d" />
  @for (i of [0, 1, 2]; track i) {
    <polygon #rider points="-9,-7 11,0 -9,7" />
  }
</svg>

Cómo funciona

Todo el <svg> lleva la directiva drawSvg, así que cada forma con trazo se dibuja, escalonada. En un solo <path> dibuja solo ese.
El morph es una línea de GSAP puro: gsap.to(shape, { morphSVG: STAR }) dentro de un handler contextSafe. MorphSVG interpola entre dos paths cualesquiera.
El círculo sigue la curva con MotionPath, en loop sobre el ticker de GSAP. Sal de la página y el contexto lo revierte todo: ScrollTriggers, splits y paths por igual.