Auto-Animate hat seinen ersten offiziellen Adapter für Marko 6 veröffentlicht, der es Entwicklern ermöglicht, Listenänderungen mit einem einzigen Tag und ohne zusätzliches JavaScript zu animieren. Dieser Schritt ist wichtig, da er den Boilerplate-Code entfernt, der Animationen in Marko-Projekten lange Zeit wie einen Sonderaufwand erscheinen ließ.

Das Rendering-Modell von Marko überspringt den clientseitigen „Hydration“-Schritt, auf den Frameworks wie React oder Vue angewiesen sind. Nachdem der Server das HTML gesendet hat, setzt Marko das Markup einfach an Ort und Stelle fort, was die Bundles winzig hält – etwa 7 KB (gzipped) für die Runtime. Derselbe Shortcut blockiert jedoch viele Animationsbibliotheken, die auf ein clientseitiges Rendering warten, bevor sie Effekte anwenden können. Ohne einen Hook in das bereits vorhandene DOM mussten Entwickler traditionell für jedes Listen-Update eigenen Code schreiben.

Der neue Adapter umgeht diese Einschränkung, indem er sich in den onMount-Lifecycle von Marko einklinkt. Wenn eine Komponente gemountet wird, erstellt der Adapter einen MutationObserver, der den Parent-Node der Liste auf Änderungen überwacht. Wenn Elemente hinzugefügt, gefiltert oder sortiert werden, löst der Observer die integrierte Transition-Engine von auto-animate aus und liefert automatisch flüssige Ein-, Aus- und Reorder-Animationen. All dies geschieht hinter einem einzigen <auto-animate>-Tag.

Der Tag akzeptiert drei Attribute:

  • parent – eine Marko-Tag-Variable, die auf den Listencontainer verweist.
  • options – ein Objekt für Dauer, Easing und andere Timing-Einstellungen.
  • enabled – ein reaktiver Boolean, mit dem Animationen zur Laufzeit ein- oder ausgeschaltet werden können.

Da enabled reaktiv ist, können Entwickler ihn an jeden State-Wert binden und Bewegungen umschalten, ohne das DOM zu berühren oder Handler neu zu schreiben. Der Adapter bietet daher mehr Flexibilität als eine statische Direktive, während er für den Rest des Komponentenbaums unsichtbar bleibt.

Für Teams, die Vite verwenden, kann das Paket eine „unresolved import“-Warnung verursachen. Das Hinzufügen des folgenden Codes zu vite.config.ts löst das Problem:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

Dies weist Vite an, das Plugin von Marko den Import verarbeiten zu lassen, anstatt zu versuchen, ihn vorab zu bündeln.

Der praktische Nutzen ist sofort spürbar. Eine typische Marko-Liste, die zuvor einen useEffect-Hook, manuelles Umschalten von Klassen und einige Zeilen Animationscode erforderte, kann nun so geschrieben werden:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

Kein zusätzliches JavaScript, kein zusätzliches Bundle-Gewicht und dieselbe flüssige Bewegung, die auto-animate für andere Frameworks bietet.

Wer profitiert, wer beobachtet

Front-End-Teams, die Marko bereits eingeführt haben, erhalten eine fertige Lösung für ein häufiges UI-Muster – dynamische Listen. Die Leichtigkeit des Adapters bewahrt Markos Markenzeichen winziger Bundles, was für performancekritische Websites entscheidend ist. Andererseits konzentriert sich der Adapter derzeit auf Listen-Mutationen; Entwickler, die eine maßgeschneiderte Timeline-Steuerung oder komplexe Choreografien benötigen, müssen weiterhin auf eigenen Code oder eine andere Bibliothek zurückgreifen.

Worauf man als Nächstes achten sollte

Der Adapter ist Open-Source und verfügt bereits über eine Demo-Sandbox, die in den Release Notes verlinkt ist. Community-Feedback wird wahrscheinlich zukünftige Erweiterungen prägen, wie etwa die Unterstützung für Grid-Reflows oder die Integration von Markos kommenden Transitions auf Komponentenebene. Wenn die Adoptionskurve die rasche Verbreitung von auto-animate in React und Vue widerspiegelt, könnten wir einen breiteren Trend zu „Zero-Code“-Animationen im gesamten JavaScript-UI-Ökosystem erleben.

Fazit: Der Marko 6-Adapter von Auto-Animate verwandelt eine historisch mühsame Aufgabe – das Animieren von serverseitig gerenderten Listen – in einen einzigen deklarativen Tag. Er bewahrt Markos minimale Bundle-Größe und bietet Entwicklern gleichzeitig eine sofort einsatzbereite, umschaltbare Motion-Ebene.