Auto-animate heeft een officiële adapter uitgebracht voor Marko 6, waardoor ontwikkelaars lijstwijzigingen kunnen animeren met een enkele tag en zonder aangepaste code. Het pakket is beschikbaar via npm, wordt geïmporteerd als AutoAnimate en werkt direct voor toevoegingen, verwijderingen en het wijzigen van de volgorde.

Waarom Marko dit nodig had

Het renderingmodel van Marko slaat de gebruikelijke hydratatiestap over. De server streamt HTML, de client 'vervolgt de draad' vanaf het exacte punt waar de server stopte, en geen tweede render bouwt een componentboom opnieuw op. Omdat het framework nauwelijks JavaScript bevat, zou elke extra bibliotheek die een zware runtime injecteert dat voordeel tenietdoen.

De nieuwe adapter koppelt direct aan de echte DOM-nodes die Marko al levert. Het maakt een MutationObserver aan — een browser-API die veranderingen in de DOM in de gaten houdt — en activeert de transition-logica van auto-animate telkens wanneer de onderliggende data van de lijst verandert. In de praktijk hoeven ontwikkelaars alleen hun data te wijzigen; de DOM wordt automatisch bijgewerkt en geanimeerd.

Aan de slag gaan

  1. Installeer het kernpakket 

    npm install @formkit/auto-animate

  2. Haal de Marko-specifieke adapter binnen 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. Wikkel het bovenliggende element van de lijst in met <AutoAnimate>.

Dat is het al. Geen hooks, geen extra directives, geen handmatig lifecycle-beheer.

Vite-tip

Nieuwe Vite-projecten geven soms een importfout voor de adapter. Het toevoegen van het volgende aan vite.config.ts lost dit op:

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

De uitsluiting zorgt ervoor dat de eigen plugin van Marko het pakket afhandelt in plaats van de optimizer van Vite.

Wat ontwikkelaars eraan hebben

  • Minimale footprint – De adapter voegt alleen de code toe die nodig is om DOM-mutaties te observeren; het blaast de al slanke bundel van Marko niet op.
  • Reactief aan- en uitzetten – Een eenvoudig reactief attribuut kan animaties tijdens runtime aan- of uitzetten.
  • Geen extra handelingen – Geen noodzaak om per item animatielogica te schrijven of mount/unmount-hooks te beheren.
  • Automatische opschoning – De tag ruimt zijn observer op wanneer de component unmount, wat geheugenlekken voorkomt.

Een live demo toont de volledige API, inclusief optionele plugins voor bounce- en spring-stijl effecten. De link naar de sandbox staat in de originele aankondiging.

Mogelijke nadelen

De adapter richt zich op lijstanimaties; complexere choreografie (bijv. een getrapte entree van niet-gerelateerde elementen) vereist nog steeds aangepaste code of een andere bibliotheek. Ontwikkelaars die Vite gebruiken, moeten de configuratieaanpassing onthouden, anders krijgen ze een importfout. Ten slotte, omdat het mechanisme afhankelijk is van MutationObserver, zullen omgevingen zonder een volledige DOM (zoals tests voor server-side rendering) de animaties niet zien, hoewel ze de UI ook niet zullen breken.

Wat je verder kunt verwachten

De onderhouders van auto-animate hebben hints gegeven over extra adapters voor andere frameworks die de "resume-from-HTML"-filosofie van Marko delen. Als de Marko-plugin populair blijkt te zijn, kunnen we in de komende maanden community-bijdragen zien, zoals ondersteuning voor drag-and-drop of integratie met state-management bibliotheken.

Conclusie: Door de declaratieve transition engine van auto-animate te combineren met de minimal-runtime-aanpak van Marko, levert de nieuwe adapter lijstanimaties die vrijwel niets kosten aan bundelgrootte en geen extra code vereisen, waardoor de developer experience net zo wrijvingsloos blijft als het framework zelf.