Auto-animate released an official adapter for Marko 6, letting developers animate list changes with a single tag and no custom code. The package drops in via npm, imports as AutoAnimate and works out-of-the-box for additions, removals and reorders.

Why Marko needed this

Marko’s rendering model skips the usual hydration step. The server streams HTML, the client “resumes” from the exact point the server left off, and no second render rebuilds a component tree. Because the framework ships with barely any JavaScript, any extra library that injects a heavy runtime would erase that advantage.

The new adapter hooks directly onto the real DOM nodes that Marko already delivers. It creates a MutationObserver—a browser API that watches for changes to the DOM—and triggers auto-animate’s transition logic whenever the list’s underlying data mutates. In practice, developers only have to mutate their data; the DOM updates and animates automatically.

Getting started

  1. Install the core package 

    npm install @formkit/auto-animate

  2. Pull in the Marko-specific adapter 

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

  3. Wrap the list’s parent element with <AutoAnimate>.

That’s it. No hooks, no extra directives, no manual lifecycle management.

Vite tip

New Vite projects sometimes throw an import error for the adapter. Adding the following to vite.config.ts resolves it:

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

The exclusion lets Marko’s own plugin handle the package instead of Vite’s optimizer.

What developers gain

  • Tiny footprint – The adapter adds only the code needed to observe DOM mutations; it does not inflate Marko’s already lean bundle.
  • Reactive toggling – A simple reactive attribute can turn animations on or off at runtime.
  • Zero ceremony – No need to write per-item animation logic or manage mount/unmount hooks.
  • Automatic cleanup – The tag disposes its observer when the component unmounts, preventing memory leaks.

A live demo showcases the full API, including optional plugins for bounce and spring-style effects. The sandbox link is provided in the original announcement.

Possible downsides

The adapter focuses on list animations; more complex choreography (e.g., staggered entrance of unrelated elements) still requires custom code or a different library. Developers using Vite must remember the config tweak, or they’ll hit an import error. Finally, because the mechanism relies on MutationObserver, environments without a full DOM (like server-side rendering tests) won’t see the animations, though they won’t break the UI either.

What to watch next

Auto-animate’s maintainers have hinted at additional adapters for other frameworks that share Marko’s “resume-from-HTML” philosophy. If the Marko plugin proves popular, we may see community-contributed extensions—such as drag-and-drop support or integration with state-management libraries—appear in the coming months.

Takeaway: By marrying auto-animate’s declarative transition engine with Marko’s minimal-runtime approach, the new adapter delivers list animations that cost almost nothing in bundle size and require no extra code, keeping the developer experience as frictionless as the framework itself.