Auto-Animate Meluncurkan Adapter Marko 6, Animasi Daftar dengan Satu Tag

Auto-Animate merilis adapter resmi pertamanya untuk Marko 6, memungkinkan pengembang menganimasi perubahan daftar hanya dengan satu tag dan tanpa JavaScript tambahan. Langkah ini penting karena menghilangkan kode boilerplate yang selama ini membuat animasi dalam proyek Marko terasa seperti upaya khusus.

Model rendering Marko melewati langkah “hydration” di sisi klien yang diandalkan oleh framework seperti React atau Vue. Setelah server mengirimkan HTML, Marko langsung melanjutkan markup tersebut di tempatnya, yang menjaga ukuran bundle tetap kecil—sekitar 7 KB gzipped untuk runtime-nya. Namun, jalan pintas yang sama ini menghalangi banyak library animasi yang menunggu render di sisi klien sebelum dapat memasang efek. Tanpa hook ke DOM yang sudah ada, pengembang secara tradisional harus menulis kode khusus untuk setiap pembaruan daftar.

Adapter baru ini menghindari batasan tersebut dengan melakukan hooking ke lifecycle onMount milik Marko. Saat sebuah komponen dipasang (mount), adapter membuat MutationObserver yang memantau perubahan pada node induk daftar tersebut. Saat item ditambahkan, difilter, atau diacak, observer akan memicu mesin transisi bawaan auto-animate, memberikan animasi masuk, keluar, dan pengaturan ulang (reorder) yang mulus secara otomatis. Semua itu terjadi di balik satu tag <auto-animate>.

Tag tersebut menerima tiga atribut:

• parent – variabel tag Marko yang merujuk ke kontainer daftar.
• options – sebuah objek untuk durasi, easing, dan pengaturan waktu lainnya.
• enabled – boolean reaktif yang dapat menyalakan atau mematikan animasi saat runtime.

Karena enabled bersifat reaktif, pengembang dapat mengikatnya ke nilai state apa pun dan mengubah gerakan tanpa menyentuh DOM atau menulis ulang handler. Oleh karena itu, adapter ini menawarkan fleksibilitas lebih dibandingkan direktif statis sambil tetap tidak terlihat oleh sisa pohon komponen lainnya.

Bagi tim yang menggunakan Vite, paket ini dapat menyebabkan peringatan “unresolved import”. Menambahkan hal berikut ke vite.config.ts akan menyelesaikan masalah tersebut:

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

Ini memberi tahu Vite untuk membiarkan plugin Marko menangani import tersebut daripada mencoba melakukan pre-bundle.

Hasil praktisnya dapat langsung dirasakan. Daftar Marko tipikal yang sebelumnya memerlukan hook useEffect, toggle class manual, dan beberapa baris kode animasi kini dapat ditulis sebagai:

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

Tanpa JavaScript tambahan, tanpa beban bundle tambahan, dan dengan gerakan mulus yang sama seperti yang disediakan auto-animate untuk framework lainnya.

Siapa yang diuntungkan, siapa yang mengamati

Tim front-end yang telah mengadopsi Marko mendapatkan solusi siap pakai untuk pola UI yang sering muncul—daftar dinamis. Sifat adapter yang ringan menjaga ciri khas Marko berupa bundle yang kecil, yang sangat krusial untuk situs yang mementingkan performa. Di sisi lain, adapter saat ini berfokus pada mutasi daftar; pengembang yang membutuhkan kontrol timeline khusus atau koreografi yang kompleks masih harus kembali menggunakan kode kustom atau library lain.

Apa yang perlu diperhatikan selanjutnya

Adapter ini bersifat open-source dan sudah memiliki sandbox demo yang ditautkan dari catatan rilis. Umpan balik komunitas kemungkinan besar akan membentuk ekstensi di masa mendatang, seperti dukungan untuk grid reflow atau integrasi dengan transisi tingkat komponen Marko yang akan datang. Jika kurva adopsinya mencerminkan pengambilan cepat auto-animate di React dan Vue, kita mungkin akan melihat dorongan yang lebih luas untuk gerakan “zero-code” di seluruh ekosistem UI JavaScript.

Kesimpulan: Adapter Marko 6 dari Auto-Animate mengubah tugas yang secara historis merepotkan—menganimasi daftar yang dirender di server—menjadi satu tag deklaratif, menjaga ukuran bundle minimal Marko sambil memberikan lapisan gerakan instan yang dapat diaktifkan/nonaktifkan bagi pengembang.