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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

Tokopedia

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

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

कोड

यहां दिए गए तरीके में, 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 (प्रॉडक्ट की जानकारी वाला पेज)

Scroll-driven Animations API का इस्तेमाल करते समय ध्यान रखने वाली बातें

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

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

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

}

संसाधन

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

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

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