स्क्रोल-ड्रिवन ऐनिमेशन की केस स्टडी

Swetha Gopalakrishnan

Saurabh Rajpal

स्क्रोल किए जाने वाले ऐनिमेशन, वेब पर आम तौर पर इस्तेमाल किए जाने वाले UX पैटर्न होते हैं. स्क्रोल-ड्रिवन ऐनिमेशन, स्क्रोल कंटेनर की स्क्रोल पोज़िशन से लिंक होता है. इसका मतलब है कि जैसे ही ऊपर या नीचे स्क्रोल किया जाएगा, लिंक किया गया ऐनिमेशन, सीधी प्रतिक्रिया के हिसाब से आगे या पीछे खुल जाएगा. इसके उदाहरणों में, पैरलॅक्स बैकग्राउंड इमेज या स्क्रोल करने पर चलने वाले रीडिंग इंडिकेटर जैसे इफ़ेक्ट शामिल हैं.

डेवलपर आम तौर पर, मुख्य थ्रेड पर स्क्रोल इवेंट का जवाब देने के लिए JavaScript का इस्तेमाल करके, स्क्रोल किए जाने वाले ऐनिमेशन बनाते हैं. इससे स्क्रोल करते हुए बेहतर ऐनिमेशन बनाने में मुश्किल होती है, जो स्क्रोलिंग के साथ सिंक होते हैं. इसकी वजह यह है कि स्क्रोल इवेंट एसिंक्रोनस रूप से डिलीवर किए जाते हैं. साथ ही, मुख्य थ्रेड में मौजूद होने की वजह से अक्सर जैंक होने लगता है.

हालांकि, सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं को ब्राउज़र पर लॉन्च करने के बाद, अब डिक्लेरेटिव स्क्रोल वाले ऐनिमेशन बनाए जा सकते हैं. स्क्रोल टाइमलाइन और व्यू टाइमलाइन की मदद से, मौजूदा Web Animations API (WAAPI) और CSS Animations API के साथ इंटिग्रेट होने वाले नए कॉन्सेप्ट हैं. अब मुख्य थ्रेड में, स्क्रोल करके आसानी से चलने वाले रेशम आसानी से स्क्रोल किए जा सकने वाले ऐनिमेशन चलाए जा सकते हैं. इसके लिए, आपको सिर्फ़ कोड की कुछ लाइन का इस्तेमाल करना होगा. इस केस स्टडी में जानें कि Tokopedia, redBus, और Policybazaar को इस नई सुविधा से पहले से ही क्या फ़ायदा मिल रहा है.

Tokopedia

Tokopedia ने अपने पेज की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए, स्क्रोल-ड्रिवन ऐनिमेशन के साथ अपने पिछले कस्टम JavaScript को बदल दिया. साथ ही, अपने ई-कॉमर्स कन्वर्ज़न फ़नल में ब्राउज़ करने के पूरे अनुभव को बेहतर बनाने के लिए भी ऐसा किया.

हमने परंपरागत JavaScript स्क्रोल इवेंट का इस्तेमाल करने के मुकाबले, कोड की लाइन का 80% तक इस्तेमाल करने में कामयाबी हासिल की. साथ ही, हमने पाया कि स्क्रोल करते समय सीपीयू का औसत इस्तेमाल 50% से घटकर 2% कम हो गया है— एंडी विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, टोकोपीडिया

कोड

यहां दिए गए तरीके में, scroll() फ़ंक्शन का इस्तेमाल करके बिना पहचान ज़ाहिर किए स्क्रोल करने की प्रोग्रेस की टाइमलाइन सेट की जाती है. इससे सीएसएस ऐनिमेशन की प्रोग्रेस को कंट्रोल किया जा सकता है. सबसे ऊपर मौजूद स्टिक बार दिखने की स्थिति, तय किए गए animationRange में स्क्रोल की स्थिति के आधार पर बदलती है.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus के थिंग्स-टू-डू लैंडिंग पेज पर, मोबाइल और डेस्कटॉप के लिए अलग-अलग ऐनिमेशन हैं. ये सभी उपयोगकर्ताओं को कन्वर्ज़न फ़नल में शुरुआती दौर में दिखाए जाते हैं. स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, वे पसंद के मुताबिक JavaScript लागू करने के इन तरीकों को सीएसएस से बदल पाए, ताकि वैसा ही असर पड़े.

उपयोग के उदाहरण

इमेज रीवल (मोबाइल के लिए) और कवर फ़्लो (डेस्कटॉप के लिए) वाली फ़ोटो गैलरी.

कोड (मोबाइल)

पिछले उदाहरण में, Tokopedia ने बिना पहचान ज़ाहिर किए स्क्रोल की प्रोग्रेस वाली टाइमलाइन का इस्तेमाल किया था. नीचे दिए गए कोड में, redBus नाम वाले व्यू की प्रोग्रेस के लिए टाइमलाइन का इस्तेमाल करता है. ऐनिमेशन, एलिमेंट के सबसे नज़दीक वाले स्क्रोलर में बताए गए animation-range में, <img> एलिमेंट के opacity और clip-path को बदल देता है. इस मामले में, यह फ़ोटो गैलरी का स्क्रोलर है.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

हमें यह सुविधा देखकर बहुत खुशी हो रही है, क्योंकि यह बेहतर अनुभव के साथ परफ़ॉर्मेंस का बेहतरीन ब्लेंड है. इससे एसईओ के लिए, पेज पर उपयोगकर्ता अनुभव के सिग्नल को बढ़ावा मिलता है. सबसे बड़ी बात यह है कि कम से कम लर्निंग कर्व, इसे हर ई-कॉमर्स वेबसाइट के लिए ज़रूरी बनाता है. हमें अन्य टीमों से भी सकारात्मक सुझाव और सहायता मिली, ताकि हम ज़्यादा उपयोगकर्ताओं के सफ़र के लिए, एसडीए का फ़ायदा ले सकें.— अमित कुमार, सीनियर इंजीनियरिंग मैनेजर, redBus.

Policybazaar

बीमा प्लान की तुलना करना, उपयोगकर्ताओं की एक मुख्य कार्रवाई है. इससे उन्हें फ़ैसला लेने में मदद मिलती है. स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल करके, Policybazaar ने टेबल को स्क्रोल करने पर, कम प्राथमिकता वाले एलिमेंट का साइज़ छोटा कर दिया. इससे, स्क्रोल करने का अनुभव बेहतर हुआ है. साथ ही, टेक्स्ट को पढ़ने में भी आसानी हुई है.

स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, हमने उपयोगकर्ता के लिए व्यूपोर्ट स्पेस को बढ़ाया, ताकि वह प्लान की तुलना कर सके. इससे, उपयोगकर्ता को पढ़ने का बेहतर अनुभव मिलता है और उसे किसी भी तरह की परेशानी नहीं होती.—ऋषभ मेहरोत्रा, हेड ऑफ डिज़ाइन फ़ॉर लाइफ़ इंश्योरेंस बीयू, PolicyBazaar.

कोड

Tokopedia के पिछले उदाहरण की तरह ही, Policybazaar में scroll() फ़ंक्शन का इस्तेमाल किया जा रहा है. साथ ही, सीएसएस ऐनिमेशन की प्रोग्रेस को कंट्रोल करने के लिए, बिना पहचान के स्क्रोल करने की प्रोग्रेस की टाइमलाइन सेट की जा रही है. इस मामले में, फ़ॉन्ट का साइज़ छोटा किया जाता है और तय किए गए animation-range में स्क्रोल पोज़िशन के हिसाब से हेडर को फ़ेड किया जाता है.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

उपयोगकर्ता के सफ़र में सामान्य पैटर्न के तौर पर स्क्रोल-ड्रिवन ऐनिमेशन

चुनिंदा ई-कॉमर्स कंपनियों ने कार्ड वाले पेजों पर स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल किया. इससे, कार्ड पर उपयोगकर्ता का ध्यान खींचा जा सका. यहां दिए गए उदाहरणों में, उपयोगकर्ता के सफ़र के अलग-अलग हिस्सों में कार्ड पर स्क्रोल इफ़ेक्ट दिखाए गए हैं. आम तौर पर, कस्टम सीएसएस ऐनिमेशन की प्रोग्रेस को कंट्रोल करने के लिए, पहचान छिपाकर दी गई व्यू की प्रोग्रेस टाइमलाइन का इस्तेमाल किया जाता है, जैसा कि यहां दिए गए सीएसएस स्निपेट में दिखाया गया है.

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

RedBus (होम पेज)

Policybazaar (प्रॉडक्ट लिस्टिंग पेज)

Tokopedia (प्रॉडक्ट की जानकारी वाला पेज)

स्क्रोल-ड्रिवन ऐनिमेशन एपीआई का इस्तेमाल करते समय ध्यान रखने वाली बातें

जिन ब्राउज़र पर यह सुविधा काम नहीं करती उनके लिए, स्क्रोल-ड्रिवन ऐनिमेशन को polyfill किया जा सकता है. उदाहरण के लिए, स्क्रोल-टाइमलाइन polyfill की मदद से. अगर ऐसा किया जाता है, तो इसके लिए अतिरिक्त जांच की ज़रूरत होगी. इससे यह पक्का किया जा सकेगा कि यह आपके फ़्रेमवर्क के साथ ठीक से काम कर रहा है. साथ ही, पॉलीफ़िल का इस्तेमाल करने वाले ब्राउज़र में ऐनिमेशन के काम न करने या गड़बड़ी का अनुभव न हो.

स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल करने से पहले, सीएसएस में @supports का इस्तेमाल करके, ऐनिमेशन-टाइमलाइन के साथ काम करने की सुविधा की जांच की जा सकती है. उदाहरण के लिए:

@supports (animation-timeline: scroll()) {

}

संसाधन

• स्क्रोल करने पर चलने वाले ऐनिमेशन के डेमो
• स्क्रोल करने पर, स्क्रोल-ड्रिवन ऐनिमेशन की मदद से एलिमेंट ऐनिमेट करना
• Codelab: सीएसएस में स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल शुरू करना
• Chrome एक्सटेंशन: स्क्रोल-ड्रिवन ऐनिमेशन डीबगर
• स्क्रोल-टाइमलाइन पॉलीफ़िल
• क्या आपको किसी गड़बड़ी या नई सुविधा की शिकायत करनी है? हम आपकी राय जानना चाहते हैं!

इस सीरीज़ के अन्य लेख देखें. इनमें बताया गया है कि सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं, जैसे कि व्यू ट्रांज़िशन, पॉपओवर, कंटेनर क्वेरी, और has() सिलेक्टर का इस्तेमाल करने से ई-कॉमर्स कंपनियों को किस तरह फ़ायदा मिला.

• आपकी ई-कॉमर्स साइट के लिए, वेब यूज़र इंटरफ़ेस (यूआई) की सुविधाएं क्यों ज़रूरी हैं?
• ट्रांज़िशन की केस स्टडी देखना
• Popover API से जुड़ी केस स्टडी
• कंटेनर क्वेरी की केस स्टडी
• :has() सिलेक्टर की केस स्टडी