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

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

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

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

टोकोपीडिया

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 में तय किए गए 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 के हेड.

कोड

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 (प्रॉडक्ट की जानकारी वाला पेज)

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

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

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

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

}

रिसॉर्स

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

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

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