Auto-Animate lança adaptador para Marko 6, anima listas com apenas uma tag

Auto-Animate released its first official adapter for Marko 6, letting developers animate list changes with a single tag and no extra JavaScript. The move matters because it removes the boiler-plate that has long made motion in Marko projects feel like a special-case effort.

Marko’s rendering model skips the client-side “hydration” step that frameworks such as React or Vue rely on. After the server sends HTML, Marko simply resumes that markup in place, which keeps bundles tiny—roughly 7 KB gzipped for the runtime. The same shortcut, however, blocks many animation libraries that wait for a client-side render before they can attach effects. Without a hook into the already-present DOM, developers have traditionally had to write custom code for every list update.

The new adapter sidesteps that limitation by hooking into Marko’s onMount lifecycle. When a component mounts, the adapter creates a MutationObserver that watches the list’s parent node for changes. As items are pushed, filtered, or shuffled, the observer triggers auto-animate’s built-in transition engine, delivering smooth entry, exit and reorder animations automatically. All that happens behind a single <auto-animate> tag.

The tag accepts three attributes:

• parent – a Marko tag variable that points at the list container.
• options – an object for duration, easing and other timing settings.
• enabled – a reactive boolean that can turn animations on or off at runtime.

Because enabled is reactive, developers can bind it to any state value and toggle motion without touching the DOM or rewriting handlers. The adapter therefore offers more flexibility than a static directive while staying invisible to the rest of the component tree.

For teams using Vite, the package can cause an “unresolved import” warning. Adding the following to vite.config.ts resolves the issue:

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

This tells Vite to let Marko’s plugin handle the import rather than trying to pre-bundle it.

The practical payoff is immediate. A typical Marko list that previously required a useEffect hook, manual class toggles and a handful of lines of animation code can now be written as:

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

No extra JavaScript, no extra bundle weight, and the same smooth motion that auto-animate provides for other frameworks.

Who wins, who watches

Front-end teams that have already adopted Marko gain a ready-made solution for a frequent UI pattern—dynamic lists. The lightweight nature of the adapter preserves Marko’s hallmark of tiny bundles, which is crucial for performance-critical sites. On the flip side, the adapter currently focuses on list mutations; developers needing bespoke timeline control or complex choreography will still have to fall back to custom code or another library.

What to watch next

The adapter is open-source and already has a demo sandbox linked from the release notes. Community feedback will likely shape future extensions, such as support for grid reflows or integration with Marko’s upcoming component-level transitions. If the adoption curve mirrors the rapid uptake of auto-animate in React and Vue, we could see a broader push for “zero-code” motion across the JavaScript UI ecosystem.

Takeaway: Auto-Animate’s Marko 6 adapter turns a historically cumbersome task—animating server-rendered lists—into a single declarative tag, preserving Marko’s minimal bundle size while giving developers an instant, toggle-able motion layer.