Lottie बनाम SVG और CSS एनिमेशन: कब कौन बेहतर है

CSS, SVG और Lottie की तुलना कैसी है?

ये विकल्प एक-दूसरे के प्रतिद्वंद्वी नहीं, बल्कि परतें हैं। हर एक पिछले वाले के ऊपर क्षमता भी जोड़ता है और लागत भी।

lottie-web और dotlottie-web के player साइज़ Charmotion ने 12 अक्टूबर 2026 को npm packages से मापे; Rive के आँकड़े उसकी प्रकाशित runtime-size table से हैं। सबसे नीचे वाली वह row चुनें जो आपका एनिमेशन दिखा सके।

CSS transition कब काफ़ी है?

जब भी एनिमेशन किसी पहले से मौजूद element की property बदलता हो: hover पर ऊपर उठता button, fade in होता panel, skeleton shimmer, घूमता spinner। CSS transitions दो स्टेट के बीच animate करते हैं; @keyframes एनिमेशन कई स्टेप वाले sequence चलाते हैं और लूप हो सकते हैं।

.card { transition: transform 200ms ease-out, opacity 200ms ease-out; }
.card:hover { transform: translateY(-4px); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }

web.dev की परफ़ॉर्मेंस गाइडेंस कहती है कि जहाँ संभव हो transform और opacity को animate करें, क्योंकि browsers इन्हें layout दोबारा calculate किए या repaint किए बिना संभाल लेते हैं। width, top या box-shadow को animate करना भी काम करता है, लेकिन हर फ़्रेम पर ज़्यादा खर्च आता है।

जब motion ही आर्टवर्क हो, तब CSS काफ़ी नहीं रहता। हाथ हिलाता कैरेक्टर, दर्जनों टुकड़ों वाला confetti burst या illustrated ऑनबोर्डिंग सीन बनाने में सैकड़ों हाथ से tune किए गए keyframes लगेंगे। यहीं से design tool और file format फ़ायदेमंद होने लगते हैं।

Animated SVG कब Lottie से बेहतर है?

जब एनिमेशन कुछ ऐसे paths का हो जिन्हें आप नाम से पहचान सकें। Inline SVG elements को किसी भी दूसरे element की तरह CSS से style और animate किया जा सकता है, जिससे classic effects बन जाते हैं: stroke-dashoffset को animate करके line खींचना, किसी आइकन को दो स्टेट के बीच morph करना, लोगो mark को pulse कराना।

<svg viewBox="0 0 24 24" class="check">
  <path d="M4 12l5 5L20 6" pathLength="1" />
</svg>

.check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 400ms ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

SVG के अपने declarative animation elements भी हैं, SMIL के <animate> और <animateTransform>, जिन्हें MDN document करता है और जो तब भी काम करते हैं जब SVG बिना CSS access के इमेज के रूप में load हो।

Animated SVG वज़न और control में आगे है: कोई player नहीं, markup searchable और styleable है, और यह आपके color tokens अपना लेता है। बनाने के मामले में यह पीछे है। कुछ से ज़्यादा हिलते हिस्सों को हाथ से code करना धीमा है, और ज़्यादातर वेक्टर editors एनिमेशन एक्सपोर्ट नहीं करते। असल में Lottie, design tool से जटिल SVG जैसा एनिमेशन निकालने का एक तरीका है।

Web Animations API का क्या?

Web Animations API (WAAPI) उसी इंजन का JavaScript हिस्सा है जो CSS एनिमेशन चलाता है। Element.animate(keyframes, options) एक एनिमेशन शुरू करता है और एक object लौटाता है जिसे आप play, pause, reverse या seek कर सकते हैं, साथ में sequencing के लिए finished promise मिलता है।

const anim = document.querySelector(".badge").animate(
  [{ transform: "scale(1)" }, { transform: "scale(1.15)" }, { transform: "scale(1)" }],
  { duration: 300, easing: "ease-out" }
);
await anim.finished;

इसे तब इस्तेमाल करें जब CSS को logic चाहिए: ऐसा एनिमेशन जो network request के बाद शुरू हो, कई स्टेप जोड़े, या script में calculate हुई values पर प्रतिक्रिया दे। इसमें कोई डाउनलोड नहीं जुड़ता।

React में Motion ("motion/react" से import किया जाता है) जैसी libraries इस तरह के control को components में लपेट देती हैं, साथ में exit और layout एनिमेशन भी देती हैं जो सादे CSS में मुश्किल होते हैं। ये आपके मौजूदा elements को animate करती हैं, इसलिए ये Lottie नहीं बल्कि CSS के परिवार में आती हैं। ऐसी library कहाँ खत्म होती है और animation file कहाँ शुरू, यह Rive बनाम Motion में बताया गया है।

Lottie अपने रनटाइम के लायक कब है?

जब एनिमेशन design किया गया हो, code नहीं। Lottie इसलिए है ताकि मोशन डिज़ाइनर After Effects में बनाएँ, Bodymovin से एक्सपोर्ट करें, और engineers को एक ऐसी फ़ाइल दें जो web, iOS, Android, React Native और Windows पर एक जैसी चले। LottieFiles का Lottie Creator browser में चलने वाला विकल्प देता है, जो dotLottie files के अंदर स्टेट मशीन भी बनाता है।

Lottie तब सही है जब:

• आर्टवर्क में कई shapes, masks और eased keyframes हों जो CSS में व्यावहारिक न हों;
• एक ही एनिमेशन कई platforms पर ship करना हो, जो CSS और SVG native तौर पर नहीं कर सकते;
• designers timing पर बार-बार बदलाव करते हों और आप code बदलने के बजाय फ़ाइल बदलना चाहें;
• आप पहले से Lottie player ship करते हों, इसलिए हर नए एनिमेशन का खर्च सिर्फ़ उसकी फ़ाइल हो।

खर्च player का है। Charmotion के npm packages के माप के अनुसार, web पर lottie-web लगभग 76 KB gzipped (light build के लिए 46 KB) है, और नया dotlottie-web brotli के साथ लगभग 433 KB का WebAssembly engine load करता है। इनमें से किसी को भी सिर्फ़ उन्हीं pages पर load करें जहाँ एनिमेशन दिखता हो। lottie-web SVG, canvas या HTML में render कर सकता है, इसलिए आप हर एनिमेशन के लिए crispness और speed के बीच चुनाव कर सकते हैं।

हर विकल्प पर मोशन कम करें की सेटिंग कैसे लागू होती है?

prefers-reduced-motion media feature बताता है कि किसी ने अपने operating system से motion कम करने को कहा है। MDN के अनुसार यह जनवरी 2020 से व्यापक रूप से उपलब्ध है। हर तरीका इसे अलग ढंग से संभालता है:

• CSS और CSS वाला SVG: एक media query एनिमेशन बंद कर देती है या उन्हें fade से बदल देती है।
• WAAPI और JavaScript libraries: शुरू करने से पहले matchMedia("(prefers-reduced-motion: reduce)") जाँचें, और बदलावों को सुनें। Motion का MotionConfig reducedMotion="user" यह आपके लिए कर देता है।
• SMIL: media query इसे सीधे pause नहीं कर सकती; animated SVG छिपाएँ और उसकी जगह static SVG दिखाएँ।
• Lottie: web पर preference जाँचें और play करने के बजाय किसी अर्थपूर्ण फ़्रेम पर goToAndStop call करें। lottie-ios ने 4.3.0 में reduced-motion सपोर्ट जोड़ा।

@media (prefers-reduced-motion: reduce) {
  .card, .spinner, .check path { animation: none; transition: none; }
}

हमेशा एक static version रखें जो स्टेट को फिर भी समझा सके। WCAG वाला पहलू एक्सेसिबल एनिमेशन और मोशन कम करें में बताया गया है।

Rive कहाँ फ़िट होता है?

जटिलता के पैमाने पर Rive, Lottie से एक कदम आगे है। यह भी एक designed-asset format है, जिसे Rive editor में बनाया जाता है और open-source runtimes चलाते हैं, लेकिन इसकी फ़ाइल में एक स्टेट मशीन होती है जिसे आपका code रनटाइम पर चलाता है। यह कई स्टेट वाले कैरेक्टर या control के लिए सही है, जैसे ऐसा मैस्कॉट जो idle रहता है, इंतज़ार करता है, जश्न मनाता है और माफ़ी माँगता है, सब एक ही फ़ाइल में।

यह CSS की जगह नहीं लेता। hover effect के लिए WebAssembly रनटाइम इस्तेमाल करना बेकार होगा; Rive अपने web packages का साइज़ renderer के अनुसार 222-648 KB brotli-compressed बताता है। समझदारी भरा बँटवारा है: interface motion के लिए CSS, आइकन के लिए SVG, और illustrator की बनाई किसी भी चीज़ के लिए file format। सिर्फ़ Lottie और Rive के बीच फ़ैसले के लिए Rive बनाम Lottie देखें।

अगर आपको किसी मौजूदा कैरेक्टर, मैस्कॉट या लोगो का एनिमेटेड version चाहिए, तो Charmotion उसे बनाता है: एक .riv में 17 एनिमेशन, मूड नंबर, ट्रिगर और Data Binding view model के साथ, साथ ही MP4, GIF, ट्रांसपेरेंट WebM और MOV, और web, React और SwiftUI code। यह Lottie नहीं बल्कि Rive बनाता है, इसलिए यह Lottie pipeline की जगह लेने के बजाय CSS और SVG का साथ देता है।

CSS, SVG या Lottie में से क्या चुनें?

CSS या Web Animations API चुनें अगर:

• आप मौजूदा इंटरफ़ेस एलिमेंट एनिमेट कर रहे हैं: बटन, कार्ड, मेन्यू, टोस्ट, स्पिनर;
• आप कोई अतिरिक्त डाउनलोड नहीं चाहते और code में पूरा कंट्रोल चाहते हैं;
• मोशन कम करने का विकल्प सिर्फ़ एक media query से संभल जाना चाहिए।

एनिमेटेड SVG चुनें, अगर:

• एनिमेशन एक आइकन, लाइन ड्रॉइंग या लोगो मार्क है जिसमें कुछ ही path हिलते हैं;
• उसे आपकी थीम के रंग अपनाने हैं और हर साइज़ पर साफ़ दिखना है;
• कोई developer मोशन को आसानी से हाथ से लिख या बदल सकता है।

Lottie चुनें, अगर:

• एनिमेशन किसी मोशन डिज़ाइनर ने After Effects या Lottie Creator में बनाया है;
• उसमें इतने shapes और keyframes हैं कि उन्हें हाथ से code करना मुश्किल है;
• एक ही फ़ाइल को वेब और native ऐप, दोनों पर चलना है।

और Rive तब चुनें जब इलस्ट्रेशन में कई स्टेट चाहिए हों जिनके बीच आपका ऐप स्विच करता है। ज़्यादातर साइटें आखिर में इनमें से दो या तीन को साथ में इस्तेमाल करती हैं।

अक्सर पूछे जाने वाले सवाल

क्या Lottie, CSS एनिमेशन से तेज़ है?

नहीं। transform और opacity के CSS एनिमेशन ब्राउज़र के अपने animation engine में चलते हैं और कोई library डाउनलोड नहीं करनी पड़ती। Lottie एक player जोड़ता है और हर फ़्रेम में वेक्टर shapes फिर से बनाता है। Lottie की खूबी डिज़ाइन किए गए आर्टवर्क को ज़्यादा भावपूर्ण ढंग से दिखाना है, स्पीड नहीं। जहाँ भी CSS से मोशन बन सके, CSS इस्तेमाल करें।

क्या After Effects एनिमेशन को एनिमेटेड SVG के रूप में एक्सपोर्ट कर सकते हैं?

सीधे एक self-contained एनिमेटेड SVG के रूप में नहीं। आम तरीका Bodymovin है, जो Lottie JSON एक्सपोर्ट करता है, और फिर lottie-web उसे ब्राउज़र में SVG के रूप में render कर सकता है। फिर भी मोशन Lottie player पर निर्भर रहता है, यह CSS या SMIL एनिमेशन की तरह SVG markup के अंदर नहीं रहता।

क्या SMIL deprecated है?

नहीं। animate और animateTransform जैसे SMIL animation elements अब भी MDN पर documented हैं और मौजूदा ब्राउज़र में काम करते हैं। फिर भी कई developer SVG एनिमेशन के लिए CSS पसंद करते हैं, क्योंकि उसकी tooling बाकी साइट जैसी ही है और वह एक आसान media query से prefers-reduced-motion का सम्मान करता है।

आइकन के लिए Lottie इस्तेमाल करें या SVG?

आसान आइकन स्टेट के लिए CSS के साथ inline SVG इस्तेमाल करें, जैसे check का बनते हुए दिखना या menu का close बटन में बदलना। Lottie तब इस्तेमाल करें जब किसी डिज़ाइनर ने ज़्यादा रिच आइकन एनिमेशन बनाए हों, खासकर पूरा सेट, और आप उन्हीं पेजों पर दूसरे एनिमेशन के लिए player पहले से भेज रहे हों।

इस गाइड से झटपट जवाब

• Lottie इस्तेमाल करें या CSS एनिमेशन?

स्रोत

• Using CSS animations, MDN Web Docs
• How to create high-performance CSS animations, web.dev
• Using the Web Animations API, MDN Web Docs
• SVG animation with SMIL, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• lottie-web, Airbnb on GitHub
• lottie-web package, npm
• Runtime sizes, Rive