Example · SVG

SVG animation

SVG is regular DOM to GSAP: strokes draw in with DrawSVG, shapes morph with MorphSVG, and elements ride paths with MotionPath. All three plugins are registered once in provideGsap. The floating shape starts as the Angular mark; Morph cycles it through the others.

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>

How this works

The whole <svg> carries the drawSvg directive, so every stroked shape inside draws in, staggered. On a single <path> it draws just that one.
The morph is one line of vanilla GSAP: gsap.to(shape, { morphSVG: STAR }) inside a contextSafe handler. MorphSVG interpolates between any two paths.
The rider circle follows the curve with MotionPath, looping on GSAP's ticker. Leave the page and the context reverts all of it, ScrollTriggers, splits, and paths alike.