Auto-animate lançou um adaptador oficial para o Marko 6, permitindo que desenvolvedores animem mudanças em listas com uma única tag e sem código personalizado. O pacote é instalado via npm, importado como AutoAnimate e funciona imediatamente para adições, remoções e reordenações.

Por que o Marko precisava disso

O modelo de renderização do Marko pula a etapa usual de hidratação. O servidor faz o streaming do HTML, o cliente "retoma" exatamente do ponto onde o servidor parou, e nenhum segundo render reconstrói uma árvore de componentes. Como o framework é entregue com quase nenhum JavaScript, qualquer biblioteca extra que injete um runtime pesado anularia essa vantagem.

O novo adaptador se conecta diretamente aos nós reais do DOM que o Marko já entrega. Ele cria um MutationObserver — uma API do navegador que observa mudanças no DOM — e aciona a lógica de transição do auto-animate sempre que os dados subjacentes da lista sofrem mutação. Na prática, os desenvolvedores só precisam mutar seus dados; o DOM é atualizado e animado automaticamente.

Primeiros passos

  1. Instale o pacote principal 

    npm install @formkit/auto-animate

  2. Adicione o adaptador específico para Marko 

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

  3. Envolva o elemento pai da lista com <AutoAnimate>.

É isso. Sem hooks, sem diretivas extras, sem gerenciamento manual de ciclo de vida.

Dica de Vite

Novos projetos Vite às vezes apresentam um erro de importação para o adaptador. Adicionar o seguinte ao vite.config.ts resolve o problema:

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

A exclusão permite que o próprio plugin do Marko lide com o pacote em vez do otimizador do Vite.

O que os desenvolvedores ganham

  • Impacto mínimo – O adaptador adiciona apenas o código necessário para observar mutações no DOM; ele não infla o bundle já enxuto do Marko.
  • Alternância reativa – Um simples atributo reativo pode ligar ou desligar as animações em tempo de execução.
  • Sem complexidade adicional – Não é necessário escrever lógica de animação por item ou gerenciar hooks de montagem/desmontagem.
  • Limpeza automática – A tag descarta seu observador quando o componente é desmontado, evitando vazamentos de memória.

Uma demonstração ao vivo mostra a API completa, incluindo plugins opcionais para efeitos de "bounce" e "spring". O link do sandbox é fornecido no anúncio original.

Possíveis desvantagens

O adaptador foca em animações de lista; coreografias mais complexas (ex: entrada escalonada de elementos não relacionados) ainda exigem código personalizado ou uma biblioteca diferente. Desenvolvedores que usam Vite devem lembrar do ajuste de configuração, caso contrário, encontrarão um erro de importação. Por fim, como o mecanismo depende de MutationObserver, ambientes sem um DOM completo (como testes de renderização no lado do servidor) não verão as animações, embora isso também não quebre a interface.

O que observar a seguir

Os mantenedores do Auto-animate deram pistas sobre adaptadores adicionais para outros frameworks que compartilham a filosofia de "retomar a partir do HTML" do Marko. Se o plugin do Marko se tornar popular, poderemos ver extensões contribuídas pela comunidade — como suporte a drag-and-drop ou integração com bibliotecas de gerenciamento de estado — surgindo nos próximos meses.

Conclusão: Ao unir o mecanismo de transição declarativa do auto-animate com a abordagem de runtime mínimo do Marko, o novo adaptador entrega animações de lista que custam quase nada em tamanho de bundle e não exigem código extra, mantendo a experiência do desenvolvedor tão fluida quanto o próprio framework.