Auto-Animate lanceert Marko 6-adapter, animeert lijsten met één tag

Auto-Animate heeft zijn eerste officiële adapter voor Marko 6 uitgebracht, waardoor ontwikkelaars lijstwijzigingen kunnen animeren met een enkele tag en zonder extra JavaScript. Deze stap is belangrijk omdat het de boilerplate verwijdert die animaties in Marko-projecten lang als een uitzonderlijke inspanning heeft laten aanvoelen.

Het renderingmodel van Marko slaat de client-side “hydration”-stap over waar frameworks zoals React of Vue op vertrouwen. Nadat de server HTML heeft verzonden, hervat Marko die markup simpelweg op de plek, wat zorgt voor minuscule bundles — ongeveer 7 KB gzipped voor de runtime. Dezelfde shortcut blokkeert echter veel animatielibrariën die wachten op een client-side render voordat ze effecten kunnen koppelen. Zonder een hook in de reeds aanwezige DOM moesten ontwikkelaars traditioneel voor elke lijstupdate aangepaste code schrijven.

De nieuwe adapter omzeilt deze beperking door in te haken op de onMount lifecycle van Marko. Wanneer een component wordt gemount, maakt de adapter een MutationObserver aan die de parent node van de lijst in de gaten houdt op wijzigingen. Terwijl items worden toegevoegd, gefilterd of gehusseld, activeert de observer de ingebouwde transition engine van auto-animate, wat automatisch zorgt voor vloeiende entry-, exit- en reorder-animaties. Dit alles gebeurt via een enkele <auto-animate> tag.

De tag accepteert drie attributen:

• parent – een Marko-tagvariabele die naar de lijstcontainer verwijst.
• options – een object voor duur, easing en andere timinginstellingen.
• enabled – een reactieve boolean die animaties tijdens runtime aan of uit kan zetten.

Omdat enabled reactief is, kunnen ontwikkelaars deze binden aan een willekeurige state-waarde en beweging aan- of uitzetten zonder de DOM aan te raken of handlers te herschrijven. De adapter biedt daarom meer flexibiliteit dan een statische directive, terwijl hij onzichtbaar blijft voor de rest van de componentboom.

Voor teams die Vite gebruiken, kan het pakket een “unresolved import”-waarschuwing veroorzaken. Het toevoegen van het volgende aan vite.config.ts lost het probleem op:

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

Dit vertelt Vite om de plugin van Marko de import te laten afhandelen in plaats van te proberen deze vooraf te bundelen.

Het praktische voordeel is direct merkbaar. Een typische Marko-lijst die voorheen een useEffect-hook, handmatige class-toggles en een handvol regels animatiecode vereiste, kan nu als volgt worden geschreven:

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

Geen extra JavaScript, geen extra bundelgewicht en dezelfde vloeiende beweging die auto-animate biedt voor andere frameworks.

Wie wint, wie kijkt toe

Front-end teams die Marko al hebben geadopteerd, krijgen een kant-en-klare oplossing voor een veelvoorkomend UI-patroon: dynamische lijsten. Het lichtgewicht karakter van de adapter behoudt het kenmerk van Marko — minuscule bundles — wat cruciaal is voor prestatiegevoelige sites. Aan de andere kant richt de adapter zich momenteel op lijstmutaties; ontwikkelaars die behoefte hebben aan op maat gemaakte timeline-controle of complexe choreografie, zullen nog steeds moeten terugvallen op aangepaste code of een andere bibliotheek.

Wat je verder moet verwachten

De adapter is open-source en er is al een demo-sandbox gelinkt in de release notes. Feedback van de community zal waarschijnlijk toekomstige uitbreidingen vormgeven, zoals ondersteuning voor grid reflows of integratie met de aanstaande component-level transitions van Marko. Als de adoptiecurve de snelle opname van auto-animate in React en Vue weerspiegelt, zouden we een bredere push kunnen zien voor “zero-code” beweging in het hele JavaScript UI-ecosysteem.

Takeaway: De Marko 6-adapter van Auto-Animate verandert een historisch omslachtige taak — het animeren van server-gerenderde lijsten — in een enkele declaratieve tag, waardoor de minimale bundelgrootte van Marko behouden blijft terwijl ontwikkelaars een directe, aan- en uitzetbare bewegingslaag krijgen.