Lottie animation vector graphics के लिए एक open format है

 (lottie.github.io)
2 पॉइंट द्वारा GN⁺ 2025-05-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Lottie vector graphics animation के लिए एक open file format है, जो Adobe After Effects में बनाई गई animations को web और mobile पर आसानी से चलाने में मदद करता है
  • animation JSON format में store होती है, जिसमें keyframes, easing curves, layer information जैसे सभी animation elements शामिल होते हैं
  • यह format extensibility, resolution independence, और विभिन्न renderer implementations जैसी खूबियों वाला एक open standard है, और कई कंपनियां user experience बेहतर बनाने के लिए इसका उपयोग कर रही हैं
  • Lottie Animation Community (LAC), Linux Foundation के अंतर्गत एक non-profit open source project है, जिसका लक्ष्य इस format को industry standard के रूप में विकसित करना है
  • specification docs, validation tools, implementations, और roadmap समुदाय द्वारा विकसित और सार्वजनिक किए जाते हैं, और यह पारदर्शी व सहयोगात्मक संरचना के साथ संचालित होता है

Lottie क्या है

अवलोकन

  • Lottie, 2015 में Hernan Torrisi द्वारा विकसित एक open source vector animation format है
  • After Effects में बनाई गई animations को Lottie JSON file के रूप में export करके विभिन्न platforms पर चलाया जा सकता है
  • आज यह web, mobile, TV जैसे कई platforms पर व्यापक रूप से इस्तेमाल किया जाने वाला एक standard format है

विशेषताएं

  • vector graphics आधारित
    • pixel-based होने के बजाय यह geometric shapes (lines, curves आदि) से बना होता है, इसलिए resolution से स्वतंत्र रूप से sharp image rendering संभव है
  • Tweening
    • animator द्वारा परिभाषित keyframes के बीच के बदलाव को अपने आप interpolate करने का तरीका
    • complex motion को manually बनाए बिना भी smooth animation तैयार की जा सकती है
  • JSON आधारित format
    • JSON में व्यक्त होने के कारण web पर transmit करना आसान है, और मौजूदा tools से edit या automate करना सुविधाजनक है
    • यह एक open standard है, इसलिए कोई भी implementation बना सकता है और interoperability अच्छी रहती है
  • परिपक्व ecosystem
    • players, assets, authoring tools, libraries आदि सहित एक मजबूत ecosystem अच्छी तरह स्थापित है
    • Airbnb, Google जैसी कई कंपनियां इसका उपयोग करती हैं, और इसे विभिन्न tools व frameworks में support मिलता है

Lottie Animation Community (LAC)

  • Lottie के standardization और प्रसार के लिए Linux Foundation के अंतर्गत स्थापित non-profit community
  • Lottie file format को cross-platform animation standard के रूप में स्थापित करना इसका लक्ष्य है
  • यह Joint Development Foundation की governance के तहत संचालित होती है और open collaboration को बढ़ावा देती है
  • स्पष्ट spec docs, validation tools (Validator), implementations की सूची, और roadmap के माध्यम से ecosystem की बुनियाद उपलब्ध कराती है
  • यह ऐसी संरचना है जिसमें कोई भी भाग ले सकता है और योगदान दे सकता है, और पारदर्शिता तथा community-driven विकास पर जोर दिया जाता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-05-26
Hacker News की राय

  • हर बार जब मैं Lottie इस्तेमाल करता हूँ तो थोड़ा निराश होता हूँ। आइडिया वाकई शानदार है, और यह आकर्षक है कि animator लोग जिन tools का पहले से इस्तेमाल करते हैं, उनसे सीधे animation export किया जा सकता है, लेकिन इसका implementation बहुत निराशाजनक है। इस क्षेत्र में कहीं अधिक compact binary format कहीं ज़्यादा उपयुक्त होता, लेकिन numerical data के बड़े blobs को बेवजह JSON में रखा जाता है। ऊपर से JSON external files को refer कर सकता है, इसलिए व्यवहार में या तो कई files किसी folder में होती हैं, या files base64 के रूप में JSON के अंदर inline होती हैं, या फिर पूरा package compress होकर एक file बन जाता है। वेब पर load करने पर बहुत भारी SDK लानी पड़ती है, और यह animation या तो कई files अलग-अलग load करती है, या एक ही file को कई अलग parsers (JSON, base64, png, lottie, zip आदि) से process करना पड़ता है। .lottie file इस्तेमाल करें तो JS bundle में zip decompressor भी शामिल करना पड़ता है, और अलग .lottie player में 2MB wasm blob तक शामिल है, जिसका कारण मुझे ठीक से समझ नहीं आता। हमारी app में इसकी वजह से app size कम करने के लिए बहुत मशक्कत करनी पड़ी, और शुक्र है कि हमने इसे critical path में इस्तेमाल नहीं किया था, इसलिए बात किसी तरह संभल गई। Animation optimize करना, paths और inline issues को हाथ से ठीक करना, vector के png में बदल जाने वाले bugs संभालना—ऐसी बहुत मेहनत करनी पड़ी। ऊपर से browser कई animations एक साथ चलाने पर अच्छा perform नहीं करता, खासकर low-end devices पर; JS और DOM में animation processing उम्मीद से कम efficient निकली। अगर कभी weekend project के लिए समय मिला, तो इसे optimized SVG sprites में बदलकर CSS transitions से चलाने का experiment करूँगा कि शायद बेहतर हो

    • पूरी तरह सहमत हूँ, और After Effects से Lottie export करने वाला workflow खास तौर पर भयानक था। बहुत सारी layers और styles export में ठीक से काम नहीं करतीं, इसलिए motion designer को एक-एक करके समझाना पड़ता था कि कौन-सी features इस्तेमाल करनी हैं और कौन-सी नहीं, और designers को यह हिस्सा बिल्कुल पसंद नहीं आता। सच कहूँ तो बस video render करके interaction के हिसाब से play करना कई बार कहीं हल्का और कम मेहनत वाला साबित हुआ। Rive के बारे में भी सुना है, और लगता है कि वह Lottie की कमियों को सुधारने पर केंद्रित है। हालांकि मैंने खुद अभी तक इस्तेमाल नहीं किया, इसलिए नतीजे case-by-case हो सकते हैं

    • जिस कंपनी में मैं पहले था, वहाँ webapp bundle size 8MB था (compress करने पर लगभग 2MB), और जाँचने पर पता चला कि उसका ज़्यादातर हिस्सा Lottie library (2MB) और सिर्फ चार animations की वजह से था। उनमें से दो animations हटा दिए, और बाकी को Lottie के साथ lazy loading पर डाल दिया। फिर भी designers और दूसरे developers को यह समझा नहीं पाया कि 8MB bundle कितना बड़ा मसला है, इसलिए अंत में लगा कि यह लड़ाई मैं हार गया

    • Browser कई Lottie animations एक साथ चलाने पर टिक नहीं पाता—इस बात से सहमत हूँ। 2000 के शुरुआती दशक में भी animated Flash ads से भरे web pages बहुत थे; performance issues तब भी थे, लेकिन उस दौर के single-core CPU पर भी वे चल जाते थे

    • दूसरी तरफ, JSON format compress करने पर बहुत छोटा हो जाता है और JavaScript VM में load करने के लिहाज़ से भी काफ़ी efficient है

    • जब मैंने Lottie इस्तेमाल किया था, तब विकल्प mp4 और Lottie के बीच था। mp4 की तुलना में Lottie बहुत छोटा था

  • Animation को एक खुले common format में manage करने का विचार मुझे पसंद है। लेकिन अफ़सोस यह है कि web developers अक्सर CSS या SVG animations (जो कहीं छोटे होते हैं और adjust करना भी आसान होता है) को बेहतर सीखने के बजाय Lottie को बहुत आसानी से चुन लेते हैं, जबकि सिर्फ library/wrapper से ही कई सौ KB जुड़ जाते हैं और हर animation का अलग overhead भी होता है। Lottie की main site पर files के छोटे होने का दावा किया जाता है, लेकिन तुलना सिर्फ GIF या PNG से की जाती है, SVG/CSS animation से नहीं—यह बात भी खटकती है। हाँ, native mobile apps में यह काफ़ी अच्छी तरह फिट हो सकता है

    • Lottie का असली महत्व CSS transitions जैसी simple animations में नहीं, बल्कि कहीं अधिक complex और expressive animations में है, जो छोटे cartoon जैसी लगती हैं। Telegram Messenger में Lottie से बने animated stickers देखिए, जैसे: https://tlgrm.eu/stickers/Princess, तो बात साफ़ हो जाती है

    • मेरे अनुभव में Lottie सबसे ज़्यादा तब चमकता है जब इसे design authoring tools, खासकर After Effects, के target format के रूप में इस्तेमाल किया जाए। साथ जोड़े गए लेख में भी Lottie और उसके file format की मूल ताकत के रूप में इसी बात का ज़िक्र है। इसे कोई भी हाथ से लिखता नहीं है। मैं mobile app developer के रूप में Lottie animations के साथ काम कर चुका हूँ, लेकिन खुद creator नहीं रहा

    • “CSS या SVG animations और सीखनी चाहिए” वाली बात पर मैं यह जोड़ना चाहूँगा कि Web 1.0 का Flash कमाल था। CSS और दूसरे standards आज भी Flash वाले अनुभव को ठीक से match नहीं कर पाए हैं। Flash एक video format, animation format, programming environment, video player, interactive UI system, game engine, MMO development engine, infographic tool—सब कुछ था। अगर Adobe ने format और player को open कर दिया होता, तो शायद वह आज तक बचा रहता। CSS/SVG/HTML/JS ही एकमात्र रास्ता है—इस fixed mindset को तोड़ना होगा। 40 साल बाद भी हम लगभग वही समस्याएँ झेल रहे हैं, तो शायद wheel को फिर से invent करने की कोशिश ज़रूरी है

    • क्या Lottie animation को SVG+JS में compile करना संभव नहीं होना चाहिए? लगता है बस ऐसा tool नहीं है

    • CSS animations (और modern Web Animations API) hardware acceleration का लाभ उठा सकती हैं, जबकि ऐसी libraries, जैसे Lottie, आम तौर पर नहीं उठा पातीं

  • Lottie और Rive दोनों को embed और implement करने का थोड़ा-बहुत अनुभव है, और Rive का अनुभव कहीं बेहतर रहा। अगर भविष्य में Lottie और Rive में से चुनना पड़े, तो क्या कोई ऐसी बात है जो मैं miss कर रहा हूँ?

    • Rive को मैंने सीधे इस्तेमाल नहीं किया, लेकिन इसकी progress देख रहा हूँ। यह जानना दिलचस्प है कि Lottie बनाने वाले developer लगभग दो साल पहले Rive team में शामिल हुए थे। इस क्षेत्र में किसी नए tool का मूल्यांकन करते समय मैं Rive को ज़रूर consider करूँगा। जिन projects में मैं था, वहाँ designer जो animations चाहते थे, उनके मुकाबले Lottie की file size justify करना मुश्किल था, इसलिए मैंने सक्रिय रूप से इसका विरोध किया। SVGator भी मैंने सफलतापूर्वक इस्तेमाल किया है। Lottie को कई जगह file size की बात किए बिना ज़रूरत से ज़्यादा hype किया जाता है—खासकर Webflow जैसे tools और industry influencers के बीच—इससे भी झुंझलाहट होती है। Lottie के लिए कुछ बिल्कुल सही use cases ज़रूर होंगे, लेकिन मुझे लगता है कि आम उपयोग के ज़्यादातर मामलों में बेहतर विकल्प मौजूद हैं

    • मैंने Rive नाम का tool पहले कभी नहीं सुना था, लेकिन यह मेरे project में उपयोगी हो सकता है—यह खोज काफ़ी रोमांचक है। ऐसी ही चीज़ों की वजह से HN छोड़ना मुश्किल है

  • हमारी company की UI library animated components (spinner, progress bar आदि) के लिए lottie-web इस्तेमाल करती है। लेकिन https://airbnb.io/lottie/#/community-showcase page खोलते ही company laptop का fan पागलों की तरह घूमने लगता है। लगता है अगर इसे CSS से बनाया गया होता तो शायद ऐसा असर नहीं होता

    • उस page पर जो दिख रहा है, वह सब animated GIF है

  • Lottie का concept वाकई शानदार है, लेकिन वास्तविक इस्तेमाल में इसके साथ काम करना बहुत कठिन है। Rive एक नया platform है जो Lottie की इन समस्याओं को हल करने की कोशिश करता है। खासकर dynamic data updates तो Lottie में लगभग असंभव जैसी चीज़ है। फिर भी हमने Lottie का इस्तेमाल करके Tracker.GG के Valorant Backtrack (Spotify Wrapped जैसे format) में dynamically data update होने वाली animations बनाई थीं (demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). इसके लिए हमने source files (After Effects) में named layers को सीधे access किया, और हर slide को अलग Lottie file बनाया ताकि slides के बीच smooth transitions हाथ से implement किए जा सकें। Lottie खुद dynamic layer access को मूल रूप से support नहीं करता, इसलिए अलग library से Lottie instances को control किया और उसके ऊपर अपना data control layer बनाया। Designers और engineers के बीच बार-बार बहुत iteration करनी पड़ी, इसलिए collaboration के लिए यह format अनुकूल नहीं है। कुछ मामलों में layer properties को उनके actual defaults, जैसे color, से target करने जैसी तरकीबें भी लगानी पड़ीं। कुल मिलाकर format के साथ काम करना सच में मुश्किल है। आगे चलकर Rive इस्तेमाल करना चाहूँगा

  • हम PBS KIDS brand animations में कई सालों से Lottie इस्तेमाल कर रहे हैं। दूसरे formats की तुलना में इसके कई फायदे हैं, और 2D plane पर runtime rendering बढ़ने पर performance गिरती है, लेकिन यह कई pipelines—game, app, video—में ठीक-ठाक integrate हो जाता है। अपेक्षाकृत low-end devices/platforms, जैसे Roku, के लिए हम ज़्यादातर static images देते हैं। After Effects workflow की वजह से एक designer looping animation बनाता है, और वहीं से Lottie/Bodymovin json, Mov (broadcast/YouTube के लिए), और SVG (low-end के लिए) सब export किए जा सकते हैं। Flash के बाद यह एक बहुत अच्छा interim replacement format था। अब हम Rive भी इस्तेमाल कर रहे हैं, और पुराने json animations को नए workflow में भी ला सकते हैं। मैंने इस क्षेत्र के कुछ प्रमुख लोगों—जैसे Pixi के Mat Groves, CloudKid के Matt Karl—के साथ काम किया है, और Flash transition period में हर कोई अलग-अलग तरीके, plugins, math, और export formats आज़मा रहा था। इन सभी प्रयासों की अपनी जगह है, और timeline-based animation के software structure की वजह से formats के बीच interoperability की समस्याएँ हमेशा रहेंगी। अंततः महत्वपूर्ण यही है कि project के लिए सबसे उपयुक्त tool चुना जाए

  • हमारी site (https://resonancy.io) की animations बनाने के लिए हमने lottielab इस्तेमाल किया, और उसका editor सच में SVG-based और बेहद बढ़िया बना हुआ है—online tools में शायद सबसे अच्छा। कुल मिलाकर अनुभव बहुत smooth था। लेकिन अगर lottielab की proprietary compressed hosting service पर export न करें, तो animation files इतनी बड़ी हो जाती हैं कि landing page पर इस्तेमाल करना लगभग मुश्किल हो जाता है। Compressed hosting औसतन 400% तक size घटा देती है, इसलिए अंत में हमने $30 प्रति माह देकर hosting ली। मैं कोई alternative format ढूँढना चाहूँगा, लेकिन animation creation process फिर से दोहराना नहीं चाहता। पहले React-based animation libraries के साथ मेरा अनुभव यह था कि complex animations हाथ से बनाना बहुत मुश्किल होता है, जबकि lottielab में जो दिमाग में आता था, उसे काफ़ी आसानी से बनाया जा सकता था। Rive अभी तक इस्तेमाल नहीं किया, लेकिन उसे आज़माने की योजना है। अगर किसी को Lottie format को अच्छी तरह compress करने वाले बाहरी tools या libraries की recommendation हो, तो जानना चाहूँगा

  • SWF में समस्या क्या है, यह मुझे समझ नहीं आता। उसकी spec भी public है, और वह बहुत efficient है। अगर security concerns ज़्यादा हैं, तो Turing-complete advanced features हटाकर भी उसे implement किया जा सकता है। किसी दूसरे comment में कहा गया था कि “यह बस एक और JSON format है”—मैं उससे सहमत हूँ। लगता है कि inefficient web environment में पले developers की एक पीढ़ी efficiency की अवधारणा ही भूल गई है

  • मैं यह जानना चाहता हूँ कि आज animated vector graphics generation का SOTA क्या है। LLM अच्छे aesthetic SVG paths नहीं बनाते, और diffusion-based image models भी सिर्फ bitmap support करते हैं। After Effects के साथ जुड़ने वाले generative AI Illustrator की माँग बड़ी है, इसलिए उम्मीद है कोई इस दिशा में कुछ क्रांतिकारी करेगा

  • Rive (प्रतिस्पर्धी service) की समस्या यह है कि कलात्मक नज़रिए से वह बहुत intuitive नहीं है। आप pen या blob tools से सीधे draw नहीं कर सकते, और आपको एक खास workflow के हिसाब से चलना पड़ता है, ज़्यादातर SVG import करके; Flash जैसी intuitive UI उससे काफ़ी दूर है। हाँ, उसमें कई दिलचस्प features हैं, लेकिन Flash जितना आसान और सहज माहौल नहीं देता

    • Raster (bitmap) images भी input type के रूप में supported हैं