Auto-Animate ने Marko 6 के लिए अपना पहला आधिकारिक एडॉप्टर रिलीज़ किया है, जिससे डेवलपर्स बिना किसी अतिरिक्त JavaScript के, केवल एक टैग के साथ लिस्ट परिवर्तनों (list changes) को एनिमेट कर सकते हैं। यह कदम महत्वपूर्ण है क्योंकि यह उस बॉयलरप्लेट (boiler-plate) को हटा देता है जिसकी वजह से Marko प्रोजेक्ट्स में मोशन (motion) को लंबे समय से एक विशेष प्रयास की तरह महसूस किया जाता था।

Marko का रेंडरिंग मॉडल उस क्लाइंट-साइड "hydration" स्टेप को छोड़ देता है जिस पर React या Vue जैसे फ्रेमवर्क निर्भर करते हैं। सर्वर द्वारा HTML भेजने के बाद, Marko बस उसी मार्कअप को वहीं से फिर से शुरू कर देता है, जिससे बंडल का आकार बहुत छोटा रहता है—रनटाइम के लिए गज़िप्ड (gzipped) लगभग 7 KB। हालाँकि, यही शॉर्टकट कई एनिमेशन लाइब्रेरीज़ को रोकता है जो प्रभाव (effects) जोड़ने से पहले क्लाइंट-साइड रेंडर का इंतज़ार करती हैं। पहले से मौजूद DOM में हुक न होने के कारण, डेवलपर्स को पारंपरिक रूप से हर लिस्ट अपडेट के लिए कस्टम कोड लिखना पड़ता था।

नया एडॉप्टर Marko के onMount लाइफसाइकिल में हुक करके उस सीमा से बच निकलता है। जब कोई कंपोनेंट माउंट होता है, तो एडॉप्टर एक MutationObserver बनाता है जो लिस्ट के पैरेंट नोड में होने वाले परिवर्तनों पर नज़र रखता है। जैसे-जैसे आइटम पुश, फ़िल्टर या शफल किए जाते हैं, ऑब्ज़र्वर auto-animate के बिल्ट-इन ट्रांज़िशन इंजन को ट्रिगर करता है, जिससे स्वचालित रूप से स्मूथ एंट्री, एग्जिट और रीऑर्डर एनिमेशन मिलते हैं। यह सब केवल एक <auto-animate> टैग के पीछे होता है।

यह टैग तीन एट्रिब्यूट्स (attributes) स्वीकार करता है:

  • parent – एक Marko टैग वेरिएबल जो लिस्ट कंटेनर की ओर इशारा करता है।
  • options – ड्यूरेशन (duration), ईज़िंग (easing) और अन्य टाइमिंग सेटिंग्स के लिए एक ऑब्जेक्ट।
  • enabled – एक रिएक्टिव (reactive) बूलियन जिसे रनटाइम पर एनिमेशन को चालू या बंद किया जा सकता है।

क्योंकि enabled रिएक्टिव है, डेवलपर्स इसे किसी भी स्टेट वैल्यू (state value) से बांध सकते हैं और DOM को छुए बिना या हैंडलर्स को दोबारा लिखे बिना मोशन को टॉगल कर सकते हैं। इसलिए, यह एडॉप्टर कंपोनेंट ट्री के बाकी हिस्सों के लिए अदृश्य रहते हुए एक स्टैटिक डायरेक्टिव की तुलना में अधिक लचीलापन प्रदान करता है।

Vite का उपयोग करने वाली टीमों के लिए, यह पैकेज "unresolved import" चेतावनी दे सकता है। vite.config.ts में निम्नलिखित जोड़ने से यह समस्या हल हो जाती है:

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

यह Vite को बताता है कि इसे प्री-बंडल करने की कोशिश करने के बजाय Marko के प्लगइन को इम्पोर्ट संभालने दें।

इसका व्यावहारिक लाभ तुरंत मिलता है। एक सामान्य Marko लिस्ट, जिसके लिए पहले useEffect हुक, मैनुअल क्लास टॉगल और एनिमेशन कोड की कुछ लाइनों की आवश्यकता होती थी, अब इस तरह लिखी जा सकती है:

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

कोई अतिरिक्त JavaScript नहीं, कोई अतिरिक्त बंडल वेट नहीं, और वही स्मूथ मोशन जो auto-animate अन्य फ्रेमवर्क के लिए प्रदान करता है।

कौन जीतता है, कौन नज़र रखता है

फ्रंट-एंड टीमें जिन्होंने पहले ही Marko को अपना लिया है, उन्हें एक सामान्य UI पैटर्न—डायनेमिक लिस्ट—के लिए एक तैयार समाधान मिल गया है। एडॉप्टर की हल्का स्वभाव (lightweight nature) Marko की छोटे बंडल की विशेषता को बनाए रखता है, जो परफॉरमेंस-क्रिटिकल साइटों के लिए महत्वपूर्ण है। दूसरी ओर, एडॉप्टर वर्तमान में केवल लिस्ट म्यूटेशन पर केंद्रित है; जिन डेवलपर्स को कस्टम टाइमलाइन कंट्रोल या जटिल कोरियोग्राफी की आवश्यकता है, उन्हें अभी भी कस्टम कोड या किसी अन्य लाइब्रेरी का सहारा लेना होगा।

आगे क्या देखने को मिलेगा

यह एडॉप्टर ओपन-सोर्स है और रिलीज़ नोट्स से ही इसका एक डेमो सैंडबॉक्स लिंक किया गया है। कम्युनिटी फीडबैक संभवतः भविष्य के विस्तार को आकार देगा, जैसे कि ग्रिड रिफ्लो (grid reflows) के लिए सपोर्ट या Marko के आगामी कंपोनेंट-लेवल ट्रांज़िशन के साथ एकीकरण। यदि अपनाने की दर (adoption curve) React और Vue में auto-animate की तीव्र वृद्धि के समान रहती है, तो हम JavaScript UI इकोसिस्टम में "zero-code" मोशन के लिए एक व्यापक बदलाव देख सकते हैं।

निष्कर्ष: Auto-Animate का Marko 6 एडॉप्टर ऐतिहासिक रूप से कठिन कार्य—सर्वर-रेंडर की गई लिस्ट को एनिमेट करना—को एक सिंगल डिक्लेरेटिव टैग में बदल देता है, जिससे Marko के न्यूनतम बंडल साइज को बनाए रखते हुए डेवलपर्स को एक इंस्टेंट, टॉगल-एबल मोशन लेयर मिलती है।