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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

हालांकि, सीएसएस और यूआई की नई सुविधाएं ब्राउज़र में उपलब्ध होने के बाद, अब स्क्रोल करने पर दिखने वाले ऐनिमेशन बनाए जा सकते हैं. स्क्रोल टाइमलाइन और व्यू टाइमलाइन की मदद से, अब स्क्रोल-ड्राइव किए गए ऐनिमेशन को आसानी से बनाया जा सकता है. ये नए कॉन्सेप्ट, मौजूदा वेब ऐनिमेशन एपीआई (WAAPI) और सीएसएस ऐनिमेशन एपीआई के साथ इंटिग्रेट होते हैं. इसके लिए, आपको सिर्फ़ कुछ लाइनों का कोड लिखना होगा. साथ ही, ये ऐनिमेशन मुख्य थ्रेड से अलग चलते हैं. इस केस स्टडी में जानें कि 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}