Warum WAAPI 2026 die richtige Wahl ist

Vor zehn Jahren war SVG-Animation eine Wahl zwischen SMIL (vom W3C deprecated), CSS (limitiert auf Transformationen) und JavaScript-Libraries (GSAP, Velocity.js). 2026 gibt es eine bessere Antwort: die Web Animations API (WAAPI), seit 2020 in allen Mainstream-Browsern stabil verfügbar. Sie kombiniert die deklarative Eleganz von CSS mit der Mächtigkeit von JavaScript-Steuerung — ohne zusätzliche Bibliothek.

Eine Format-Übersicht für Animationen findest du in unserem Web-Animation-Format-Wahl-Beitrag; dieser Beitrag geht in die SVG-Tiefe.

Das Grund-Pattern

WAAPI animiert beliebige Element-Eigenschaften. Für SVG bedeutet das: alle Attribute, die SVG nativ unterstützt — Pfad-Daten, Strich-Eigenschaften, Transform-Matrizen, Farbverläufe. Der Aufruf:

const path = document.querySelector("svg path");
path.animate(
  [
    { strokeDashoffset: 1000 },
    { strokeDashoffset: 0 }
  ],
  {
    duration: 2000,
    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
    fill: "forwards"
  }
);

Use-Case 1 — Drawing-Effekt (Strich-Animation)

Der Klassiker: ein SVG-Pfad wird Schritt für Schritt nachgezeichnet. Funktioniert via stroke-dasharray und stroke-dashoffset:

<svg viewBox="0 0 100 100">
  <path id="logo" d="M10,50 Q50,10 90,50 T10,50"
        fill="none" stroke="currentColor" stroke-width="2"
        stroke-dasharray="240" stroke-dashoffset="240"/>
</svg>

<script>
  document.getElementById("logo").animate(
    [{ strokeDashoffset: 240 }, { strokeDashoffset: 0 }],
    { duration: 1500, easing: "ease-out", fill: "forwards" }
  );
</script>

Der stroke-dasharray-Wert muss mindestens so groß sein wie die Pfad-Länge (mit path.getTotalLength() ermittelbar). Eleganter als das alte SMIL-<animate>-Tag, robuster als CSS-keyframes.

Use-Case 2 — Pfad-Morphing

Zwei SVG-Pfade animieren sich ineinander um. Pfad-Morphing braucht kompatible Pfad-Strukturen (gleiche Anzahl Anker-Punkte). Werkzeuge wie Figma's Smooth-Animation oder die flubber-Library helfen beim Vorbereiten.

const morph = path.animate(
  [
    { d: "path('M10,50 L90,50')" },
    { d: "path('M10,50 Q50,10 90,50')" }
  ],
  { duration: 800, easing: "ease-in-out" }
);

Wichtig: Pfad-Morphing via d-Animation funktioniert in Chrome, Firefox, Safari erst zuverlässig seit den 2024er-Versionen. Für ältere Browser: Fallback via SMIL oder GSAP.

Use-Case 3 — Strich-Farb-Verlauf-Animation

Strich-Farben können über die Zeit interpoliert werden:

path.animate(
  [
    { stroke: "#d4a017" },
    { stroke: "#3b82f6" },
    { stroke: "#10b981" }
  ],
  { duration: 3000, iterations: Infinity, direction: "alternate" }
);

Browser interpolieren Farb-Werte in sRGB (Default) oder in einem anderen Color-Space, wenn das per animation-composition spezifiziert wird. Display-P3-Interpolation ist seit Safari 17.4 und Chrome 122 verfügbar.

Use-Case 4 — Scroll-getriggerte Animation

Die Scroll-driven Animations API (Chrome 115+, Safari 18+, Firefox 130+) erlaubt SVG-Animationen direkt an den Scroll-Fortschritt zu binden — ohne IntersectionObserver-Setup:

path.animate(
  [{ strokeDashoffset: 240 }, { strokeDashoffset: 0 }],
  {
    duration: 1,
    timeline: new ScrollTimeline({
      source: document.scrollingElement
    })
  }
);

Damit lassen sich Hero-SVG-Logos beim Scroll nach unten „nachzeichnen" — eleganter als jedes klassische Scroll-Magic-Skript.

Performance-Implikationen

WAAPI läuft auf dem Compositor-Thread für unterstützte Eigenschaften (transform, opacity). Pfad-Animationen via d-Attribut oder stroke-dashoffset laufen dagegen auf dem Main-Thread — was bei kleinen SVGs ok, bei komplexen Pfaden (1 000+ Anker-Punkte) problematisch wird.

Faustregeln:

  • Bis 200 Anker-Punkte: WAAPI direkt nutzen.
  • 200–1 000 Anker-Punkte: nur transform/opacity animieren, Pfad- Änderung minimieren.
  • 1 000+ Anker-Punkte: Lottie oder Canvas-Render erwägen.

WAAPI vs. CSS-Animations

CSS-Animationen sind deklarativ und einfach — aber:

  • CSS kann keine SVG-Pfad-d-Attribute animieren (nur transform, opacity, stroke-Eigenschaften).
  • CSS hat keine programmatische Kontrolle über Play/Pause während der Laufzeit (Workaround mit class-toggle nötig).
  • WAAPI liefert ein Animation-Objekt mit play(),pause(), reverse(), cancel(),finish().

WAAPI vs. GSAP

GSAP (GreenSock) ist eine 80-KB-Library, die seit 2010 das Profi-Tool für Web-Animationen war. Für die meisten SVG-Animationen 2026 ist GSAP nicht mehr nötig:

  • WAAPI: 0 KB, nativ, schnell.
  • GSAP: 80 KB minified, beste Cross-Browser-Konsistenz, beste Plug-Ins (MorphSVGPlugin, MotionPath).

GSAP bleibt sinnvoll für: hochkomplexe Animationen mit Timeline-Choreografien, Profi-Pfad-Morphing (MorphSVGPlugin ist immer noch besser als WAAPI hier), Legacy- Browser-Support (IE11 ist tot, aber manche Embedded-Browser sind alt).

WAAPI vs. Lottie

Lottie kommt aus After Effects — wenn ein Designer die Animation in AE komponiert hat, ist Lottie-Export der einfachste Weg. WAAPI dagegen verlangt Hand-Code. Für kleine UI-Animationen (Logo-Reveals, Icon-Transitions) ist WAAPI deutlich leichtgewichtiger. Für komplexe Choreografien mit dutzenden Layern bleibt Lottie die richtige Wahl.

Accessibility

WCAG 2.2 verlangt Respekt vor prefers-reduced-motion:

const prefersReduced = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (!prefersReduced) {
  path.animate(...);
}

Bei reduzierter Bewegung: Sprung zum End-State, keine Animation.

Empfehlungs-Matrix

  • UI-Icon-Transitions: WAAPI direkt.
  • Logo-Drawing-Animation beim Scroll: WAAPI + ScrollTimeline.
  • Pfad-Morphing zwischen zwei Zuständen: WAAPI mit kompatiblen Pfaden.
  • Komplexe Pfad-Morphing-Sequenzen: GSAP MorphSVGPlugin.
  • After-Effects-Composition mit 30+ Layern: Lottie.
  • Charts und Daten-Visualisierungen: WAAPI mit D3.js-Pfaden.

Quellen

W3C — Web Animations Level 1 · MDN — Web Animations API · W3C — Scroll-driven Animations · flubber — SVG Path Interpolation · GSAP · web.dev — Scroll-driven Animations · Can I Use — Web Animations API.