Webflow में Rive, Lottie और वीडियो एनिमेशन कैसे जोड़ें

क्या Webflow में Rive का नेटिव सपोर्ट है?

हाँ। Rive और Webflow ने 18 सितंबर 2024 को नेटिव सपोर्ट की घोषणा की। Rive के शब्दों में, आप "Rive के production-ready ग्राफ़िक्स को अपने Webflow प्रोजेक्ट में drag and drop करके उन्हें Webflow interactions से जोड़ सकते हैं।" इस element में layout, ऑटोप्ले और touch-scroll की सेटिंग्स मिलती हैं, साथ ही event handling भी।

इससे Webflow उन no-code builders में शामिल हो जाता है जिनमें Rive का नेटिव सपोर्ट है, Wix Studio के Rive element के साथ। .riv फ़ाइल दिखाने के लिए आपको embed, script tag या किसी third-party library की ज़रूरत नहीं है, और फ़ाइल के अंदर की स्टेट मशीन काम करती रहती है: कैरेक्टर अपने आप idle कर सकता है, hover पर रिएक्ट कर सकता है और click पर रिएक्शन चला सकता है।

नेटिव सपोर्ट से आपको मनचाहा application logic नहीं मिलता। Interactions सिर्फ़ पेज events (hover, click, scroll, page load) पर रिस्पॉन्ड करते हैं। अगर आप चाहते हैं कि फ़ॉर्म सबमिट होते समय कैरेक्टर loading स्टेट में जाए और सफल होने पर जश्न मनाए, तो आपको कुछ लाइनों के custom code की ज़रूरत होगी, जिसे आखिरी सेक्शन में बताया गया है।

Rive फ़ाइलें आमतौर पर छोटी होती हैं, जो हीरो सेक्शन के लिए सही है। एक फ़ाइल में कई स्टेट वाला फ़्लैट कैरेक्टर अक्सर कुछ दसियों किलोबाइट का होता है, जो एक छोटे वीडियो से भी कम है। बड़ा डाउनलोड खुद रनटाइम का होता है, इसलिए Rive को हर पेज पर नहीं, सिर्फ़ उन्हीं पेजों पर इस्तेमाल करें जहाँ इसकी ज़रूरत है।

Webflow में .riv फ़ाइल कैसे जोड़ें?

Rive जो वर्कफ़्लो बताता है, उसमें चार स्टेप हैं:

1. .riv फ़ाइल को Assets panel में अपलोड करें।
2. उसे canvas पर या Navigator में ड्रैग करें। आप इसे Add panel में Media के अंदर से भी insert कर सकते हैं।
3. element settings में इसे कॉन्फ़िगर करें: आर्टबोर्ड और स्टेट मशीन चुनें, और fit व ऑटोप्ले सेट करें।
4. स्टेट मशीन को Interactions से कनेक्ट करें।

स्टेट मशीन चुनना ज़रूरी है। अगर आप इसे सेट नहीं करते, तो फ़ाइल अपना default एनिमेशन चलाती है और इनपुट को अनदेखा करती है। एक आम कैरेक्टर फ़ाइल में CharacterStateMachine जैसी स्टेट मशीन होती है, जिसमें एक mood नंबर (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) और success, yes व no जैसे ट्रिगर होते हैं। एक फ़ाइल में कई स्टेट मशीन हो सकती हैं, जैसे एक अलग मशीन जो एक बार intro चलाकर फिर idle करती है।

element का साइज़ तय aspect ratio के साथ रखें, जैसे square आर्टबोर्ड के लिए square box, और fit को contain पर सेट करें ताकि छोटे breakpoints पर कैरेक्टर कभी कटे नहीं।

Webflow Interactions से Rive एनिमेशन को कैसे कंट्रोल करें?

उस element पर interaction बनाएँ जिससे बदलाव होना चाहिए, जैसे button click, किसी सेक्शन का scroll होकर दिखना या किसी card पर hover। interaction के actions में Rive element को target करें और स्टेट मशीन इनपुट सेट करें: नंबर बदलें, boolean toggle करें या ट्रिगर फ़ायर करें।

mood वाले कैरेक्टर के साथ कुछ काम के पैटर्न:

• pricing card पर hover: mood को 1 (happy) पर सेट करें; hover out पर इसे वापस 0 करें।
• call-to-action पर click: link खुलने से पहले हल्की हामी के लिए yes फ़ायर करें।
• FAQ तक scroll: mood को 3 (thinking) पर सेट करें।
• पेज लोड: enter फ़ायर करें ताकि कैरेक्टर अचानक दिखने के बजाय आता हुआ दिखे।

लूप शांत रखें। पढ़ने वाले टेक्स्ट के पास लगातार ध्यान खींचने वाले लूप में चलता मैस्कॉट पाठकों का ध्यान भटकाता है, इसलिए ज़्यादा ऊर्जा वाले मूड छोटे पलों के लिए रखें और फिर idle पर लौटें। Interactions कौन-सी Rive properties चला सकते हैं, Data Binding सपोर्ट समेत, यह जानने के लिए Webflow का मौजूदा डॉक्यूमेंटेशन देखें।

Webflow में Lottie या dotLottie कैसे जोड़ें?

Webflow में Lottie एनिमेशन के लिए अलग element है। इसे Add panel (Media के अंदर) से canvas पर ड्रैग करें, फिर अपनी Lottie JSON या dotLottie फ़ाइल चुनें। Rive element की तरह इसे भी Interactions से कंट्रोल किया जा सकता है, जैसे scroll होकर दिखने पर एक बार चलाना या page scroll के साथ scrub करना।

Lottie उन इलस्ट्रेशन के लिए सही है जो शुरू से आखिर तक चलते हैं: हीरो सीन, आइकन sequence, scroll से जुड़ा diagram। dotLottie फ़ाइलें compressed होती हैं, इसलिए अगर आपका टूल दोनों एक्सपोर्ट करता है तो raw JSON के बजाय इन्हें चुनें।

जब एनिमेशन को एक ही फ़ाइल में कई स्टेट और रिएक्शन चाहिए, तब Lottie के बजाय Rive चुनें, जैसे ऐसा मैस्कॉट जो idle करे, hover पर हाथ हिलाए और click पर जश्न मनाए। Lottie में आपको आमतौर पर इन्हें अलग एनिमेशन या segments के रूप में बनाकर खुद उनके बीच switch करना पड़ता है। Rive vs Lottie गाइड में दोनों की विस्तार से तुलना है।

इसके बजाय बैकग्राउंड वीडियो कब इस्तेमाल करें?

वीडियो का इस्तेमाल footage और ऐसी तय क्लिप के लिए करें जिन्हें कभी रिएक्ट नहीं करना है: product demo, लूपिंग brand एनिमेशन, montage। Webflow का Background Video element muted होकर ऑटोप्ले और लूप होता है, जो हीरो सेक्शन के लिए सही है।

कैरेक्टर के लिए वीडियो की दो सीमाएँ हैं:

• कोई स्टेट नहीं। वीडियो एक ही sequence चलाता है। code से events पर कई क्लिप के बीच switch करना संभव है, लेकिन हर क्लिप अलग डाउनलोड होती है।
• ट्रांसपेरेंसी मुश्किल है। ट्रांसपेरेंट फ़ॉर्मेट पर ब्राउज़र एकमत नहीं हैं: Chrome, Edge और Firefox VP9-alpha WebM दिखाते हैं, जबकि Safari को .mov में alpha वाला HEVC चाहिए। एक अकेली अपलोड की गई फ़ाइल हर जगह ट्रांसपेरेंट नहीं होगी। वीडियो के साथ अपने डिज़ाइन पर कैरेक्टर overlay करने के लिए दोनों sources वाला custom code embed इस्तेमाल करें, जैसा ट्रांसपेरेंट वीडियो गाइड में बताया गया है।

कैरेक्टर के लिए .riv फ़ाइल आमतौर पर वीडियो से छोटी भी होती है और ज़्यादा सक्षम भी। ऊपर का chart एक असली सेट की तुलना करता है: सभी एनिमेशन एक ही 40 KB Rive फ़ाइल में, जबकि हर चार सेकंड के वीडियो के लिए 208 से 728 KB।

Webflow पेज में मूड वाला कैरेक्टर कैसे जोड़ें?

जब कैरेक्टर को ऐसे events फ़ॉलो करने हों जिन्हें Interactions नहीं देख सकते, जैसे form submission या fetch request, तो Rive web runtime खुद लोड करें। Rive के अनुसार उसके runtimes, Webflow के custom code feature के साथ पूरी तरह सपोर्टेड हैं। जहाँ कैरेक्टर दिखना चाहिए वहाँ Code Embed element रखें (custom code की उपलब्धता आपके Webflow प्लान पर निर्भर है) और .riv को asset के रूप में host करें:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://your-asset-url/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  const form = document.querySelector("form");
  form.addEventListener("submit", () => {
    if (r.viewModelInstance) r.viewModelInstance.number("mood").value = 5; // loading
  });
</script>

यह data binding इस्तेमाल करता है: autoBind: true फ़ाइल के व्यू मॉडल को bind करता है, और आप mood नंबर लिखते हैं या trigger("success").trigger() कॉल करते हैं। Charmotion की फ़ाइलों में ठीक इसी काम के लिए CharacterViewModelMachine है, साथ में नेटिव Webflow Interactions के लिए input-based machine भी, इसलिए एक ही अपलोड दोनों जगह काम करता है। इसके बाद Webflow का अपना form success state, अपना message दिखाने से पहले success ट्रिगर कॉल कर सकता है।

Webflow में इंटरैक्टिव Rive कैरेक्टर कैसे जोड़ें

1. फ़ाइल अपलोड करें. .riv को Webflow के Assets panel में जोड़ें।
2. element रखें. asset को canvas या Navigator पर ड्रैग करें, या Add panel में Media के अंदर से insert करें।
3. स्टेट मशीन चुनें. element settings में आर्टबोर्ड और स्टेट मशीन चुनें, fit को contain पर सेट करें और ऑटोप्ले चालू करें।
4. Interactions जोड़ें. hover, click या scroll interactions बनाएँ जो Rive element पर मूड नंबर सेट करें या ट्रिगर फ़ायर करें।
5. ऐप events के लिए code जोड़ें. form या API events के लिए Rive web runtime के साथ Code Embed इस्तेमाल करें और अपने handlers से व्यू मॉडल सेट करें।

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

क्या Webflow में Rive इस्तेमाल करने के लिए custom code चाहिए?

नहीं। सितंबर 2024 से Rive, Webflow का नेटिव फ़ॉर्मेट है: .riv अपलोड करें, उसे canvas पर ड्रैग करें, स्टेट मशीन चुनें और उसे Interactions से जोड़ें। custom code की ज़रूरत सिर्फ़ तब है जब एनिमेशन को ऐसे events पर रिएक्ट करना हो जिन्हें Interactions नहीं पकड़ सकते, जैसे API responses।

क्या Webflow में dotLottie फ़ाइलें चल सकती हैं?

हाँ। Webflow का Lottie एनिमेशन element, Lottie JSON और dotLottie दोनों फ़ाइलें लेता है, और Interactions playback को कंट्रोल कर सकते हैं, जैसे scroll होकर दिखने पर चलाना। अगर आपका एक्सपोर्ट टूल dotLottie देता है तो उसे चुनें, क्योंकि यह फ़ॉर्मेट compressed है और कई एनिमेशन, themes और स्टेट मशीन को एक ही फ़ाइल में रख सकता है।

Webflow में मेरा Rive एनिमेशन Interactions पर रिएक्ट क्यों नहीं करता?

ज़्यादातर मामलों में element settings में स्टेट मशीन चुनी नहीं होती, इसलिए डिफ़ॉल्ट एनिमेशन चलता है और इनपुट अनदेखे रह जाते हैं। यह भी जाँचें कि आपके interaction में इनपुट के नाम और टाइप फ़ाइल से बिल्कुल मेल खाते हों, कैपिटलाइज़ेशन समेत। आखिर में पक्का करें कि ऑटोप्ले चालू है, क्योंकि रुकी हुई स्टेट मशीन अपने transitions को evaluate नहीं करती।

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

• क्या Webflow में Rive का नेटिव सपोर्ट है?

स्रोत

• Rive is natively supported in Webflow, Rive
• Lottie animations, Webflow Help Center
• Web (JS) runtime, Rive
• Data binding on the web, Rive
• Video with alpha transparency on the web, Jake Archibald