Bubble, Wix Studio और Webflow में Rive और Lottie

कौन से no-code builder Rive को native रूप से सपोर्ट करते हैं?

लोकप्रिय builders में Webflow और Wix Studio में first-party Rive सपोर्ट है; Rive ने अपने blog पर native Webflow सपोर्ट की घोषणा की थी। Framer एक marketplace plugin के ज़रिए Rive सपोर्ट करता है। Wix Studio ने native Rive element जोड़ा है (.riv अपलोड करें, आर्टबोर्ड और स्टेट मशीन चुनें)। Bubble में native Rive element नहीं है, लेकिन वह HTML embed के ज़रिए Rive का web रनटाइम चला सकता है। Wix की पूरी जानकारी के लिए देखें Wix Studio में Rive एनिमेशन कैसे जोड़ें।

Webflow और Framer की अलग गाइड हैं: Webflow और Framer। FlutterFlow के बारे में FlutterFlow गाइड में बताया गया है। यह पेज Wix Studio और Bubble पर केंद्रित है।

Wix Studio में Lottie एनिमेशन कैसे जोड़ें?

Wix Studio में एक native Lottie animation element है। इसे Add Elements panel से जोड़ें, फिर एनिमेशन का URL पेस्ट करें। Wix के help center के अनुसार यह सिर्फ़ JSON format वाले Lottie URL सपोर्ट करता है, इसलिए फ़ाइल को LottieFiles (या JSON URL देने वाले किसी दूसरे host) पर अपलोड करें और वह link कॉपी करें। .lottie (dotLottie) file इस element में काम नहीं करेगी।

Element की settings playback को नियंत्रित करती हैं, जैसे looping और यह कब शुरू हो। इसे editor में किसी भी दूसरे element की तरह size करें, और mobile breakpoint को अलग से जाँचें ताकि छोटी screen पर एनिमेशन text पर हावी न हो।

Wix में decorative लूप के लिए Lottie सही विकल्प है: illustrated hero, section divider, या load होने पर एनिमेट होने वाला आइकन। ऐसे कैरेक्टर के लिए जो visitors पर रिएक्ट करे, जैसे आने पर हाथ हिलाए और form submit होने के बाद जश्न मनाए, आपको Rive की स्टेट मशीन चाहिए, यानी embed।

Wix में Rive के लिए मुझे अब भी HTML iFrame element की ज़रूरत कब पड़ती है?

Wix Studio का native Rive element चुनी गई स्टेट मशीन को अपने आप चलाता है, जिससे idle लूप या canvas पर click से रिएक्ट करने वाला एनिमेशन संभव है। जब page के दूसरे events (form submission, scroll position) से एनिमेशन बदलना हो, तो इसकी जगह HTML iFrame (Embed) element इस्तेमाल करें: code option चुनें और एक canvas के साथ Rive का web रनटाइम पेस्ट करें। Wix embedded code के लिए HTTPS माँगता है, इसलिए .riv को ऐसी storage service या CDN पर host करें जो HTTPS पर serve करे और cross-origin requests की अनुमति दे।

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.44.2"></script>
<script>
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
    onLoad: () => {
      r.resizeDrawingSurfaceToCanvas();
      r.viewModelInstance.number("mood").value = 2; // wave
    },
  });
</script>

ऊपर बताए अनुसार latest release load करने के बजाय रनटाइम version को pin करें, ताकि कोई update बिना बताए आपकी site न बदल दे। HTML element का size canvas के बराबर रखें, नहीं तो कैरेक्टर कट जाएगा।

Embed एक sandboxed iframe में चलता है, इसलिए उसके अंदर का code Wix page के दूसरे elements को पढ़ या बदल नहीं सकता, और Wix के अनुसार इस पर निर्भर widgets काम नहीं करेंगे। Canvas पर clicks सामान्य रूप से काम करते हैं; ट्रिगर फ़ायर करने वाला एक listener जोड़ें, जैसे r.viewModelInstance.trigger("yes").trigger()। Page पर कहीं और होने वाले events पर रिएक्ट करने के लिए, जैसे form submission, Wix का Velo developer platform postMessage से HTML element में messages भेज सकता है, और embed के अंदर एक message listener मूड सेट कर सकता है।

क्या Bubble का Rive plugin अब भी maintained है?

ऐसा नहीं लगता। Rive ने 31 अगस्त 2021 को Bubble forum पर एक Bubble plugin की घोषणा की थी। अक्टूबर 2023 तक उसी thread में users पूछ रहे थे कि क्या यह अब भी maintained है, और एक moderator ने बताया कि developer दो साल से ज़्यादा समय से forum पर नहीं दिखा। यह plugin Rive के data binding से पूरी तरह पहले का है।

ज़्यादा भरोसेमंद रास्ता Bubble का HTML element है, जो page पर custom HTML और scripts render करता है। Wix वाले हिस्से में दिखाया गया वही canvas और script पेस्ट करें, और .riv को HTTPS पर host करें। क्योंकि यह element iframe में नहीं बल्कि सीधे page में होता है, आप Toolbox जैसे JavaScript चलाने वाले plugin के ज़रिए Bubble workflows से भी रनटाइम को call कर सकते हैं। Instance को window पर store करें (उदाहरण के लिए window.mascot = r) और workflow शुरू होने पर window.mascot.viewModelInstance.number("mood").value = 5 चलाएँ।

अगर HTML element किसी repeating group या reusable element के अंदर है, तो हर canvas को एक unique id दें ताकि कई instances एक ही element के लिए आपस में न टकराएँ।

LottieFiles Bubble plugin कैसे इस्तेमाल करें?

LottieFiles एक आधिकारिक Bubble plugin पब्लिश करता है, जिसकी घोषणा फ़रवरी 2023 में Bubble के blog पर हुई थी। इसे plugin marketplace से install करें, इसका element page पर drag करें, और Lottie एनिमेशन का JSON URL पेस्ट करें। Bubble के अनुसार setup उतना ही आसान है जितना वह URL कॉपी-पेस्ट करना।

यह plugin Lottie के आम काम संभालता है: workflow चलने के दौरान loader, payment के बाद success एनिमेशन, या illustrated एम्प्टी स्टेट। Bubble की conditionals से element को दिखाएँ और छिपाएँ, उदाहरण के लिए सिर्फ़ तब दिखे जब is_loading जैसा कोई custom state yes हो।

Lottie की सीमा हर जगह एक जैसी है: एक फ़ाइल एक sequence चलाती है। अगर आपके मैस्कॉट को हाथ हिलाना, इंतज़ार करना और जश्न मनाना है, तो आपको कई Lottie elements रखकर उनकी visibility बदलनी होगी, या HTML element में एक ही Rive file पर जाना होगा।

MP4, GIF या WebM export कब करना चाहिए?

जब एनिमेशन को रिएक्ट करने की ज़रूरत न हो, तब वीडियो इस्तेमाल करें। हर builder बिना plugin या code के muted, looping MP4 चला सकता है, और ट्रांसपेरेंट WebM (साथ में Safari के लिए HEVC-alpha .mov) रंगीन बैकग्राउंड के ऊपर रखा जा सकता है। GIF लगभग हर जगह चलता है, email में भी, लेकिन यह बड़ा होता है और 256 रंगों तक सीमित है, साथ ही इसकी transparency के किनारे सख्त होते हैं।

• वीडियो: hero लूप, product demo, एक तय क्लिप चलाता कैरेक्टर।
• Lottie: साफ़ वेक्टर लूप, जहाँ फ़ाइल साइज़ मायने रखता है।
• Rive: ऐसा कैरेक्टर जो visitor की actions पर स्टेट बदलता है।

Charmotion एक अपलोड से वीडियो, GIF और Rive एक्सपोर्ट करता है (यह Lottie एक्सपोर्ट नहीं करता): आपके कैरेक्टर या लोगो की कुछ ही मिनटों में 17 एनिमेशन, एक Character व्यू मॉडल (0 से 9 तक एक mood नंबर और success, error, yes, no, enter और exit ट्रिगर) वाली एक .riv के रूप में, साथ में data binding वाला तैयार index.html। MP4, 9:16 MP4, GIF, ट्रांसपेरेंट WebM और MOV ज़रूरत पर एक्सपोर्ट होते हैं, लगभग एक मिनट में। .riv, ट्रांसपेरेंट WebM और MOV, और कोड के लिए पेड प्लान ($20/माह से) चाहिए।

Safari से जुड़ी बारीकियाँ ट्रांसपेरेंट वीडियो गाइड में दी गई हैं।

Wix Studio या Bubble में Rive कैरेक्टर कैसे जोड़ें

1. File host करें. .riv को ऐसी storage service या CDN पर अपलोड करें जो cross-origin access के साथ HTTPS पर serve करे।
2. Embed जोड़ें. Wix Studio का HTML iFrame element या Bubble का HTML element जोड़ें।
3. Snippet पेस्ट करें. एक canvas और पिन की हुई @rive-app/canvas script पेस्ट करें, साथ में stateMachine: "CharacterViewModelMachine" और autoBind: true।
4. एलिमेंट का साइज़ सेट करें. हर breakpoint पर embed का साइज़ canvas के बराबर रखें।
5. इवेंट जोड़ें. canvas पर क्लिक होने पर ट्रिगर फ़ायर करें, या मूड सेट करने के लिए Velo या Bubble वर्कफ़्लो से मैसेज भेजें।
6. फ़ॉलबैक जोड़ें. जहाँ scripts की अनुमति नहीं है, वहाँ poster image या म्यूट MP4 इस्तेमाल करें।

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

क्या Wix Studio .lottie फ़ाइलें चला सकता है?

इसके नेटिव एलिमेंट में नहीं। Wix के help center के अनुसार Lottie एलिमेंट सिर्फ़ JSON फ़ॉर्मेट वाले Lottie URL सपोर्ट करता है। एनिमेशन को Lottie JSON के रूप में अपलोड या कन्वर्ट करें, LottieFiles या किसी दूसरे होस्ट से उसका URL कॉपी करें और उसे एलिमेंट में पेस्ट करें। .lottie फ़ाइल के लिए इसकी जगह dotLottie player वाला HTML embed इस्तेमाल करें।

Wix में मेरा Rive embed लोड क्यों नहीं होता?

तीन चीज़ें जाँचें: .riv URL HTTPS इस्तेमाल करता हो, होस्ट embed से आने वाली cross-origin requests की अनुमति देता हो, और HTML एलिमेंट canvas दिखाने लायक बड़ा हो। पब्लिश की गई साइट पर ब्राउज़र console खोलें, क्योंकि iframe के अंदर की errors वहीं दिखती हैं और आमतौर पर फ़ेल होने वाली request का नाम बताती हैं।

क्या Rive embed SEO के लिए बुरा है?

अपने आप में नहीं। सर्च इंजन आपके पेज का टेक्स्ट और headings इंडेक्स करते हैं, canvas के pixels नहीं, इसलिए ज़रूरी शब्द एनिमेशन के पास असली टेक्स्ट में रखें। canvas को एक aria-label दें, लेआउट शिफ़्ट से बचने के लिए उसका साइज़ तय करें, और किसी बड़े एनिमेशन को सबसे पहले लोड होने वाली चीज़ न बनाएँ।

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

• Wix साइट में Rive कैसे जोड़ें?
• क्या Bubble के लिए कोई Rive plugin है?

स्रोत

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• Studio Editor: Adding and customizing Lottie animation files, Wix Help Center
• Studio Editor: Adding an HTML iFrame element, Wix Help Center
• Rive: interactive animations for Bubble, Bubble Forum
• LottieFiles Bubble plugin, Bubble
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive