स्क्रोल करके चलने वाले ऐनिमेशन की मदद से, स्क्रोल करने पर एलिमेंट को ऐनिमेट करें

स्क्रोल टाइमलाइन और व्यू टाइमलाइन का इस्तेमाल करके, स्क्रोल किए जाने पर दिखने वाले ऐनिमेशन बनाने का तरीका जानें.

Bramus

पब्लिश किया गया: 5 मई, 2023

स्क्रोल करने पर दिखने वाले ऐनिमेशन

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

दस्तावेज़ के सबसे ऊपर मौजूद रीडिंग इंडिकेटर, स्क्रोल करने पर दिखता है.

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

इस पेज पर मौजूद इमेज, दिखने पर धीरे-धीरे साफ़ होती हैं.

इस तरह के इफ़ेक्ट पाने का क्लासिक तरीका यह है कि मुख्य थ्रेड पर स्क्रोल इवेंट का जवाब दिया जाए. इससे दो मुख्य समस्याएं होती हैं:

  • मॉडर्न ब्राउज़र, स्क्रोल करने की प्रोसेस को अलग से करते हैं. इसलिए, वे स्क्रोल इवेंट को एसिंक्रोनस तरीके से डिलीवर करते हैं.
  • मुख्य थ्रेड के एनिमेशन में जंक हो सकता है.

इस वजह से, स्क्रोल करने पर दिखने वाले ऐसे ऐनिमेशन बनाना मुश्किल हो जाता है जो स्क्रोलिंग के साथ सिंक हों और बेहतर परफ़ॉर्म करें.

Chrome के वर्शन 115 से, एपीआई और कॉन्सेप्ट का एक नया सेट उपलब्ध है. इसका इस्तेमाल करके, स्क्रोल के हिसाब से चलने वाले ऐनिमेशन को चालू किया जा सकता है: स्क्रोल टाइमलाइन और व्यू टाइमलाइन.

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

वेब पर ऐनिमेशन, एक छोटा रीकैप

सीएसएस की मदद से वेब पर ऐनिमेशन

सीएसएस में ऐनिमेशन बनाने के लिए, @keyframes ऐट-रूल का इस्तेमाल करके कीफ़्रेम का सेट तय करें. इसे animation-name प्रॉपर्टी का इस्तेमाल करके किसी एलिमेंट से लिंक करें. साथ ही, यह तय करने के लिए animation-duration सेट करें कि ऐनिमेशन कितनी देर तक चलना चाहिए. animation-* की कई लॉन्गहैंड प्रॉपर्टी उपलब्ध हैं. जैसे, animation-easing-function और animation-fill-mode. इन सभी को animation शॉर्टहैंड में जोड़ा जा सकता है.

उदाहरण के लिए, यहां एक ऐसा ऐनिमेशन दिया गया है जिसमें X-ऐक्सिस पर किसी एलिमेंट का साइज़ बढ़ता है. साथ ही, उसके बैकग्राउंड का रंग भी बदलता है:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

JavaScript की मदद से वेब पर एनिमेशन बनाना

JavaScript में, Web Animations API का इस्तेमाल करके ठीक यही काम किया जा सकता है. इसके लिए, नए Animation और KeyFrameEffect इंस्टेंस बनाए जा सकते हैं. इसके अलावा, Element animate() तरीके का इस्तेमाल किया जा सकता है, जो काफ़ी छोटा है.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

ऊपर दिए गए JavaScript स्निपेट का यह विज़ुअल नतीजा, पिछले सीएसएस वर्शन जैसा ही है.

ऐनिमेशन की टाइमलाइन

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

स्क्रोल-ड्रिवन ऐनिमेशन स्पेसिफ़िकेशन में, दो नई तरह की टाइमलाइन तय की गई हैं. इनका इस्तेमाल किया जा सकता है:

  • स्क्रोल प्रोग्रेस टाइमलाइन: यह एक ऐसी टाइमलाइन होती है जो किसी खास ऐक्सिस पर स्क्रोल कंटेनर की स्क्रोल पोज़िशन से लिंक होती है.
  • प्रोग्रेस टाइमलाइन देखें: यह एक टाइमलाइन होती है, जो स्क्रोल कंटेनर में किसी एलिमेंट की पोज़िशन से जुड़ी होती है.

प्रोग्रेस टाइमलाइन को स्क्रोल करना

स्क्रोल प्रोग्रेस टाइमलाइन, ऐनिमेशन की ऐसी टाइमलाइन होती है जो किसी खास ऐक्सिस पर, स्क्रोल कंटेनर की स्क्रोल पोज़िशन में हुई प्रोग्रेस से जुड़ी होती है. स्क्रोल कंटेनर को स्क्रोलपोर्ट या स्क्रोलर भी कहा जाता है. यह स्क्रोल रेंज में मौजूद किसी पोज़िशन को प्रोग्रेस के प्रतिशत में बदलता है.

स्क्रोल करने की शुरुआती पोज़िशन, 0% प्रोग्रेस दिखाती है. वहीं, स्क्रोल करने की आखिरी पोज़िशन, 100% प्रोग्रेस दिखाती है. यहां दिए गए विज़ुअलाइज़ेशन में, स्क्रोलर को ऊपर से नीचे की ओर स्क्रोल करने पर, प्रोग्रेस 0% से 100% तक बढ़ती हुई दिखती है.

स्क्रोल प्रोग्रेस टाइमलाइन का विज़ुअलाइज़ेशन. नीचे की ओर स्क्रोल करने पर, प्रोग्रेस वैल्यू 0% से 100% तक बढ़ती है.

✨ इसे खुद आज़माएं

स्क्रोल प्रोग्रेस टाइमलाइन को अक्सर “स्क्रोल टाइमलाइन” कहा जाता है.

प्रोग्रेस टाइमलाइन देखना

इस तरह की टाइमलाइन, स्क्रोल कंटेनर में मौजूद किसी एलिमेंट की प्रोग्रेस से जुड़ी होती है. स्क्रोल प्रोग्रेस टाइमलाइन की तरह ही, स्क्रोलर के स्क्रोल ऑफ़सेट को ट्रैक किया जाता है. स्क्रोल प्रोग्रेस टाइमलाइन के उलट, इसमें स्क्रोलर में मौजूद किसी विषय की रिलेटिव पोज़िशन से प्रोग्रेस तय होती है.

इसकी तुलना IntersectionObserver से की जा सकती है. यह ट्रैक कर सकता है कि स्क्रोलर में कोई एलिमेंट कितना दिखता है. अगर एलिमेंट स्क्रोलर में नहीं दिखता है, तो इसका मतलब है कि वह इंटरसेक्ट नहीं हो रहा है. अगर यह स्क्रोलर के अंदर दिखता है, भले ही यह सबसे छोटा हिस्सा हो, तो इसका मतलब है कि यह इंटरसेक्ट हो रहा है.

व्यू प्रोग्रेस टाइमलाइन तब शुरू होती है, जब कोई विषय स्क्रोलर के साथ इंटरसेक्ट करना शुरू करता है. यह तब खत्म होती है, जब विषय स्क्रोलर के साथ इंटरसेक्ट करना बंद कर देता है. नीचे दिए गए विज़ुअलाइज़ेशन में, देखा जा सकता है कि जब विषय स्क्रोल कंटेनर में दिखता है, तब प्रोग्रेस 0% से बढ़ना शुरू होती है. जब विषय स्क्रोल कंटेनर से हट जाता है, तब प्रोग्रेस 100% पर पहुंच जाती है.

व्यू की प्रोग्रेस टाइमलाइन का विज़ुअलाइज़ेशन. विषय (हरा बॉक्स) स्क्रोलर को पार करने पर, प्रोग्रेस 0% से 100% तक बढ़ती है.

✨ इसे खुद आज़माएं

व्यू प्रोग्रेस टाइमलाइन को अक्सर “व्यू टाइमलाइन” कहा जाता है. विषय के साइज़ के आधार पर, व्यू टाइमलाइन के कुछ हिस्सों को टारगेट किया जा सकता है. हालांकि, इसके बारे में बाद में ज़्यादा जानकारी दी जाएगी.

स्क्रोल प्रोग्रेस टाइमलाइन का इस्तेमाल करना

सीएसएस में स्क्रोल प्रोग्रेस टाइमलाइन बनाना

सीएसएस में स्क्रोल टाइमलाइन बनाने का सबसे आसान तरीका, scroll() फ़ंक्शन का इस्तेमाल करना है. इससे एक गुमनाम स्क्रोल टाइमलाइन बनती है. इसे नई animation-timeline प्रॉपर्टी की वैल्यू के तौर पर सेट किया जा सकता है.

उदाहरण:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

scroll() फ़ंक्शन, <scroller> और <axis> आर्ग्युमेंट स्वीकार करता है.

<scroller> आर्ग्युमेंट के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:

  • nearest: यह सबसे नज़दीकी स्क्रोल कंटेनर (डिफ़ॉल्ट) का इस्तेमाल करता है.
  • root: यह दस्तावेज़ के व्यूपोर्ट को स्क्रोल कंटेनर के तौर पर इस्तेमाल करता है.
  • self: यह एलिमेंट को ही स्क्रोल कंटेनर के तौर पर इस्तेमाल करता है.

<axis> आर्ग्युमेंट के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:

  • block: यह स्क्रोल कंटेनर के ब्लॉक ऐक्सिस के साथ प्रोग्रेस को मेज़र करता है (डिफ़ॉल्ट).
  • inline: इसका इस्तेमाल, स्क्रोल कंटेनर के इनलाइन ऐक्सिस के साथ प्रोग्रेस को मेज़र करने के लिए किया जाता है.
  • y: यह स्क्रोल कंटेनर के y ऐक्सिस के साथ प्रोग्रेस को मेज़र करता है.
  • x: इसका इस्तेमाल, स्क्रोल कंटेनर के x ऐक्सिस पर प्रोग्रेस को मेज़र करने के लिए किया जाता है.

उदाहरण के लिए, ब्लॉक ऐक्सिस पर रूट स्क्रोलर से ऐनिमेशन को बाइंड करने के लिए, scroll() में पास की जाने वाली वैल्यू root और block हैं. इन सभी को मिलाकर, वैल्यू scroll(root block) है.

डेमो: पढ़ने की प्रोग्रेस दिखाने वाला इंडिकेटर

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

डेमो: पढ़ते समय दिखे कि लेख कितना पढ़ा गया है.

✨ इसे खुद आज़माएं

पढ़ते समय दिखे कि लेख कितना पढ़ा गया है, इसे पेज के सबसे ऊपर रखा गया है. इसके लिए, फ़िक्स्ड पोज़िशन का इस्तेमाल किया गया है. कंपोज़िट किए गए ऐनिमेशन का फ़ायदा पाने के लिए, width को ऐनिमेट नहीं किया जा रहा है. इसके बजाय, transform का इस्तेमाल करके एलिमेंट को x-ऐक्सिस पर छोटा किया जा रहा है.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

#progress एलिमेंट पर grow-progress ऐनिमेशन की टाइमलाइन को एक ऐसी ऐनिमेशन टाइमलाइन पर सेट किया गया है जिसे scroll() का इस्तेमाल करके बनाया गया है. scroll() को कोई तर्क नहीं दिया गया है. इसलिए, यह अपनी डिफ़ॉल्ट वैल्यू पर वापस आ जाएगा.

ट्रैक करने के लिए डिफ़ॉल्ट स्क्रोलर, nearest होता है. साथ ही, डिफ़ॉल्ट ऐक्सिस block होता है. यह #progress एलिमेंट के सबसे नज़दीकी स्क्रोलर के तौर पर, रूट स्क्रोलर को असरदार तरीके से टारगेट करता है. साथ ही, इसकी ब्लॉक करने की दिशा को ट्रैक करता है.

सीएसएस में, स्क्रोल प्रोग्रेस टाइमलाइन को नाम देना

स्क्रोल प्रोग्रेस टाइमलाइन को तय करने का एक और तरीका है, नाम वाली टाइमलाइन का इस्तेमाल करना. यह थोड़ा ज़्यादा जानकारी वाला है. हालांकि, यह तब काम आ सकता है, जब आपको पैरंट स्क्रोलर या रूट स्क्रोलर को टारगेट नहीं करना हो या जब पेज पर एक से ज़्यादा टाइमलाइन का इस्तेमाल किया जाता हो या जब अपने-आप लुकअप होने की सुविधा काम न करे. इस तरह, स्क्रोल प्रोग्रेस टाइमलाइन को दिए गए नाम से पहचाना जा सकता है.

किसी एलिमेंट पर स्क्रोल प्रोग्रेस टाइमलाइन बनाने के लिए, स्क्रोल कंटेनर पर scroll-timeline-name सीएसएस प्रॉपर्टी को अपनी पसंद के आइडेंटिफ़ायर पर सेट करें. वैल्यू -- से शुरू होनी चाहिए.

किस ऐक्सिस को ट्रैक करना है, यह तय करने के लिए scroll-timeline-axis प्रॉपर्टी का एलान भी करें. इस्तेमाल की जा सकने वाली वैल्यू, scroll() फ़ंक्शन के <axis> आर्ग्युमेंट के लिए इस्तेमाल की जा सकने वाली वैल्यू के जैसी ही होती हैं.

आखिर में, ऐनिमेशन को स्क्रोल प्रोग्रेस टाइमलाइन से लिंक करने के लिए, उस एलिमेंट पर animation-timeline प्रॉपर्टी को सेट करें जिसे ऐनिमेट करना है. इसकी वैल्यू, scroll-timeline-name के लिए इस्तेमाल किए गए आइडेंटिफ़ायर की वैल्यू के बराबर होनी चाहिए.

कोड का उदाहरण:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

अगर चाहें, तो scroll-timeline शॉर्टहैंड में scroll-timeline-name और scroll-timeline-axis को एक साथ इस्तेमाल किया जा सकता है. उदाहरण के लिए:

scroll-timeline: --my-scroller inline;

इस डेमो में, हर इमेज कैरसेल के ऊपर एक स्टेप इंडिकेटर दिखाया गया है. जब किसी कैरसेल में तीन इमेज होती हैं, तो इंडिकेटर बार 33% चौड़ाई से शुरू होता है. इससे पता चलता है कि फ़िलहाल, तीन इमेज में से पहली इमेज देखी जा रही है. जब आखिरी इमेज दिख रही होती है, तब इंडिकेटर स्क्रोलर की पूरी चौड़ाई ले लेता है. ऐसा तब होता है, जब स्क्रोलर आखिर तक स्क्रोल हो जाता है. ऐनिमेशन को चलाने के लिए, स्क्रोल प्रोग्रेस टाइमलाइन का इस्तेमाल किया जाता है.

डेमो: हॉरिज़ॉन्टल कैरसेल स्टेप इंडिकेटर.

✨ इसे खुद आज़माएं

गैलरी के लिए बुनियादी मार्कअप यह है:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

.gallery__progress एलिमेंट को .gallery रैपर एलिमेंट में पूरी तरह से पोज़िशन किया गया है. इसका शुरुआती साइज़, --num-images कस्टम प्रॉपर्टी से तय होता है.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer में शामिल .gallery__entry एलिमेंट को हॉरिज़ॉन्टल तौर पर लेआउट किया जाता है. साथ ही, यह स्क्रोल होने वाला एलिमेंट होता है. स्क्रोल करने की जगह को ट्रैक करके, .gallery__progress को ऐनिमेट किया जाता है. ऐसा, Scroll Progress Timeline --gallery__scrollcontainer को नाम देकर किया जाता है.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

JavaScript की मदद से स्क्रोल प्रोग्रेस टाइमलाइन बनाना

JavaScript में स्क्रोल टाइमलाइन बनाने के लिए, ScrollTimeline क्लास का नया इंस्टेंस बनाएं. आपको जिन source और axis को ट्रैक करना है उन्हें प्रॉपर्टी बैग में पास करें.

  • source: यह उस एलिमेंट का रेफ़रंस है जिसके स्क्रोलर को आपको ट्रैक करना है. रूट स्क्रोलर को टारगेट करने के लिए, document.documentElement का इस्तेमाल करें.
  • axis: इससे यह तय होता है कि किस ऐक्सिस को ट्रैक करना है. सीएसएस वैरिएंट की तरह ही, इसकी स्वीकार की गई वैल्यू block, inline, x, और y हैं.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

इसे वेब ऐनिमेशन से अटैच करने के लिए, इसे timeline प्रॉपर्टी के तौर पर पास करें. साथ ही, अगर कोई duration मौजूद है, तो उसे हटा दें.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

डेमो: पढ़ने की प्रोग्रेस दिखाने वाले इंडिकेटर की सुविधा के बारे में फिर से जानकारी

अगर आपको JavaScript की मदद से, रीडिंग प्रोग्रेस इंडिकेटर को फिर से बनाना है और उसी मार्कअप का इस्तेमाल करना है, तो यहां दिया गया JavaScript कोड इस्तेमाल करें:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

सीएसएस वर्शन में विज़ुअल नतीजा एक जैसा होता है: बनाया गया timeline, रूट स्क्रोलर को ट्रैक करता है. साथ ही, पेज को स्क्रोल करने पर, x-ऐक्सिस पर timeline को 0% से 100% तक स्केल करता है.#progress

✨ इसे खुद आज़माएं

'प्रोग्रेस देखें' टाइमलाइन का इस्तेमाल करना

सीएसएस में, बिना पहचान ज़ाहिर किए व्यू की प्रोग्रेस टाइमलाइन बनाना

व्यू प्रोग्रेस टाइमलाइन बनाने के लिए, view() फ़ंक्शन का इस्तेमाल करें. इसके लिए, <axis> और <view-timeline-inset> आर्ग्युमेंट इस्तेमाल किए जा सकते हैं.

  • <axis>, स्क्रोल प्रोग्रेस टाइमलाइन के जैसा ही होता है. इससे यह तय होता है कि किस ऐक्सिस को ट्रैक करना है. डिफ़ॉल्ट वैल्यू block है.
  • <view-timeline-inset> की मदद से, ऑफ़सेट (पॉज़िटिव या नेगेटिव) तय किया जा सकता है. इससे यह तय करने में मदद मिलती है कि कोई एलिमेंट व्यू में है या नहीं. यह वैल्यू प्रतिशत या auto होनी चाहिए. auto डिफ़ॉल्ट वैल्यू होती है.

उदाहरण के लिए, ब्लॉक ऐक्सिस पर स्क्रोलर के साथ इंटरसेक्ट करने वाले किसी एलिमेंट से ऐनिमेशन को बाइंड करने के लिए, view(block) का इस्तेमाल करें. scroll() की तरह, इसे animation-timeline प्रॉपर्टी की वैल्यू के तौर पर सेट करें. साथ ही, animation-duration को auto पर सेट करना न भूलें.

नीचे दिए गए कोड का इस्तेमाल करने पर, स्क्रोल करते समय हर img व्यूपोर्ट को पार करते ही फ़ेड-इन हो जाएगा.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

इंटरमेज़ो: टाइमलाइन की रेंज देखना

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

इसे व्यू टाइमलाइन के किसी खास हिस्से से भी लिंक किया जा सकता है. इसके लिए, वह रेंज तय करें जिससे इसे अटैच करना है. उदाहरण के लिए, ऐसा तब हो सकता है, जब कोई व्यक्ति स्क्रोलर में प्रवेश कर रहा हो. नीचे दिए गए विज़ुअलाइज़ेशन में, जब विषय स्क्रोल कंटेनर में दिखता है, तब प्रोग्रेस बार 0% से बढ़ना शुरू होता है. हालांकि, जब विषय पूरी तरह से दिखता है, तब प्रोग्रेस बार 100% पर पहुंच जाता है.

यह व्यू टाइमलाइन, विषय की एंट्री रेंज को ट्रैक करने के लिए सेट की गई है. ऐनिमेशन सिर्फ़ तब चलता है, जब सब्जेक्ट स्क्रोलपोर्ट में एंटर कर रहा हो.

व्यू टाइमलाइन की इन रेंज को टारगेट किया जा सकता है:

  • cover: यह व्यू की प्रोग्रेस टाइमलाइन की पूरी रेंज दिखाता है.
  • entry: यह उस रेंज को दिखाता है जिसके दौरान मुख्य बॉक्स, व्यू प्रोग्रेस दिखने की रेंज में आ रहा है.
  • exit: यह उस रेंज को दिखाता है जब मुख्य बॉक्स, व्यू प्रोग्रेस की दिखने की रेंज से बाहर निकल रहा होता है.
  • entry-crossing: इससे उस रेंज के बारे में पता चलता है जब मुख्य बॉक्स, आखिरी बॉर्डर के किनारे को पार करता है.
  • exit-crossing: यह उस रेंज को दिखाता है जिसके दौरान मुख्य बॉक्स, शुरुआती बॉर्डर के किनारे को पार करता है.
  • contain: यह उस रेंज को दिखाता है जिसके दौरान मुख्य बॉक्स, स्क्रोलपोर्ट में व्यू प्रोग्रेस की दिखने वाली रेंज में पूरी तरह से शामिल होता है या उसे पूरी तरह से कवर करता है. यह इस बात पर निर्भर करता है कि विषय, स्क्रोलर से लंबा है या छोटा.

किसी रेंज को तय करने के लिए, आपको range-start और range-end सेट करना होगा. इनमें से हर एक में, रेंज का नाम (ऊपर दी गई सूची देखें) और रेंज का ऑफ़सेट होता है. इससे रेंज के नाम में मौजूद पोज़िशन का पता चलता है. रेंज-ऑफ़सेट आम तौर पर 0% से 100% तक के प्रतिशत में होता है. हालांकि, 20em जैसी तय लंबाई भी तय की जा सकती है.

उदाहरण के लिए, अगर आपको किसी विषय के दिखने के साथ ही ऐनिमेशन शुरू करना है, तो रेंज की शुरुआत के लिए entry 0% चुनें. अगर आपको विषय के शुरू होने से पहले ही इसे खत्म करना है, तो रेंज के खत्म होने की वैल्यू के तौर पर entry 100% चुनें.

CSS में, इसे animation-range प्रॉपर्टी का इस्तेमाल करके सेट किया जाता है. उदाहरण:

animation-range: entry 0% entry 100%;

JavaScript में, rangeStart और rangeEnd प्रॉपर्टी का इस्तेमाल करें.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

नीचे दिए गए टूल का इस्तेमाल करके देखें कि हर रेंज-नेम का क्या मतलब है. साथ ही, देखें कि प्रतिशत, शुरुआती और आखिरी स्थितियों पर कैसे असर डालते हैं. रेंज-स्टार्ट को entry 0% और रेंज-एंड को cover 50% पर सेट करें. इसके बाद, ऐनिमेशन का नतीजा देखने के लिए स्क्रोलबार को खींचें.

टाइमलाइन की रेंज देखने वाला विज़ुअलाइज़र, https://goo.gle/view-timeline-range-tool पर उपलब्ध है

रिकॉर्डिंग देखना

'टाइमलाइन की रेंज देखें' टूल का इस्तेमाल करते समय, आपको यह दिख सकता है कि कुछ रेंज को रेंज का नाम + रेंज ऑफ़सेट के दो अलग-अलग कॉम्बिनेशन से टारगेट किया जा सकता है. उदाहरण के लिए, entry 0%, entry-crossing 0%, और cover 0% सभी एक ही इलाके को टारगेट करते हैं.

जब range-start और range-end, एक ही range-name को टारगेट करते हैं और पूरी रेंज को कवर करते हैं, तो वैल्यू को सिर्फ़ range-name पर सेट किया जा सकता है. उदाहरण के लिए, animation-range: entry 0% entry 100%; को छोटे animation-range: entry में फिर से लिखा जा सकता है.

डेमो: इमेज दिखाना

इस डेमो में, स्क्रोलपोर्ट में इमेज दिखने पर उन्हें धीरे-धीरे दिखाया जाता है. ऐसा, पहचान छिपाकर देखी गई टाइमलाइन का इस्तेमाल करके किया जाता है. ऐनिमेशन की रेंज में बदलाव किया गया है, ताकि स्क्रोलर के बीच में होने पर हर इमेज पूरी तरह से पारदर्शी हो.

डेमो: इमेज दिखाना

✨ इसे खुद आज़माएं

बड़ा होने वाला इफ़ेक्ट, क्लिप-पाथ का इस्तेमाल करके बनाया गया है. इसे ऐनिमेट किया गया है. इस इफ़ेक्ट के लिए इस्तेमाल की गई सीएसएस यह है:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

सीएसएस में, नाम वाली व्यू प्रोग्रेस टाइमलाइन बनाना

स्क्रोल टाइमलाइन की तरह ही, व्यू टाइमलाइन के भी नाम वाले वर्शन बनाए जा सकते हैं. scroll-timeline-* प्रॉपर्टी के बजाय, view-timeline- प्रीफ़िक्स वाली वैरिएंट प्रॉपर्टी का इस्तेमाल करें. जैसे, view-timeline-name और view-timeline-axis.

इसमें एक ही तरह की वैल्यू लागू होती हैं. साथ ही, नाम वाली टाइमलाइन को खोजने के लिए भी एक ही तरह के नियम लागू होते हैं.

डेमो: इमेज को ज़ाहिर करना, फिर से

इमेज दिखाने वाले डेमो के कोड में बदलाव किया गया है. अब यह कोड ऐसा दिखता है:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

view-timeline-name: revealing-image का इस्तेमाल करके, एलिमेंट को उसके सबसे नज़दीकी स्क्रोलर में ट्रैक किया जाएगा. इसके बाद, इसी वैल्यू का इस्तेमाल animation-timeline प्रॉपर्टी की वैल्यू के तौर पर किया जाता है. विज़ुअल आउटपुट, पहले जैसा ही है.

✨ इसे खुद आज़माएं

JavaScript में व्यू प्रोग्रेस टाइमलाइन बनाना

JavaScript में व्यू टाइमलाइन बनाने के लिए, ViewTimeline क्लास का नया इंस्टेंस बनाएं. आपको जिस subject को ट्रैक करना है उसके साथ axis और inset वाला प्रॉपर्टी बैग पास करें.

  • subject: यह उस एलिमेंट का रेफ़रंस होता है जिसे आपको उसके स्क्रोलर में ट्रैक करना है.
  • axis: ट्रैक करने के लिए ऐक्सिस. सीएसएस वैरिएंट की तरह ही, इसकी स्वीकार की गई वैल्यू block, inline, x, और y हैं.
  • inset: बॉक्स दिख रहा है या नहीं, यह तय करते समय स्क्रोलपोर्ट का इनसेट (पॉज़िटिव) या आउटसेट (नेगेटिव) अडजस्टमेंट.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

इसे वेब ऐनिमेशन से अटैच करने के लिए, इसे timeline प्रॉपर्टी के तौर पर पास करें. साथ ही, अगर कोई duration मौजूद है, तो उसे हटा दें. इसके अलावा, rangeStart और rangeEnd प्रॉपर्टी का इस्तेमाल करके, रेंज की जानकारी भी दी जा सकती है.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ इसे खुद आज़माएं

आज़माने के लिए कुछ और चीज़ें

एक ही सेट के कीफ़्रेम का इस्तेमाल करके, व्यू टाइमलाइन की कई रेंज में अटैच करना

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

डेमो: संपर्क सूची

✨ इसे खुद आज़माएं

इस डेमो के लिए, हर एलिमेंट को एक व्यू टाइमलाइन से सजाया गया है. यह टाइमलाइन, एलिमेंट को तब ट्रैक करती है, जब वह अपने स्क्रोलपोर्ट को पार करता है. हालांकि, इससे स्क्रोल-ड्रिवन दो ऐनिमेशन जुड़े होते हैं. animate-in ऐनिमेशन, टाइमलाइन की entry रेंज से जुड़ा है. वहीं, animate-out ऐनिमेशन, टाइमलाइन की exit रेंज से जुड़ा है.

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

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

दो अलग-अलग रेंज से जुड़े दो अलग-अलग ऐनिमेशन चलाने के बजाय, कीफ़्रेम का एक ऐसा सेट भी बनाया जा सकता है जिसमें रेंज की जानकारी पहले से मौजूद हो.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

कीफ़्रेम में रेंज की जानकारी शामिल होती है. इसलिए, आपको animation-range के बारे में बताने की ज़रूरत नहीं है. नतीजा पहले जैसा ही है.

✨ इसे खुद आज़माएं

किसी ऐसी स्क्रोल टाइमलाइन से अटैच करना जो पूर्वज नहीं है

नाम वाली स्क्रोल टाइमलाइन और नाम वाली व्यू टाइमलाइन के लिए, लुकअप मैकेनिज़्म सिर्फ़ स्क्रोल करने वाले पैरंट एलिमेंट तक सीमित होता है. हालांकि, ज़्यादातर मामलों में ऐसा होता है कि जिस एलिमेंट को ऐनिमेट करना है वह उस स्क्रोलर का चाइल्ड नहीं होता जिसे ट्रैक करना है.

इस सुविधा के काम करने के लिए, timeline-scope प्रॉपर्टी का इस्तेमाल किया जाता है. इस प्रॉपर्टी का इस्तेमाल, उस नाम की टाइमलाइन का एलान करने के लिए किया जाता है. हालांकि, इससे टाइमलाइन नहीं बनती. इससे उस नाम की टाइमलाइन का दायरा बढ़ जाता है. असल में, शेयर किए गए पैरंट एलिमेंट पर timeline-scope प्रॉपर्टी का इस्तेमाल किया जाता है, ताकि चाइल्ड स्क्रोलर की टाइमलाइन उससे अटैच हो सके.

उदाहरण के लिए:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

इस स्निपेट में:

  • .parent एलिमेंट, --tl नाम वाली टाइमलाइन का एलान करता है. इसका कोई भी चाइल्ड, इसे ढूंढ सकता है और animation-timeline प्रॉपर्टी की वैल्यू के तौर पर इस्तेमाल कर सकता है.
  • .scroller एलिमेंट, --tl नाम वाली स्क्रोल टाइमलाइन को तय करता है. डिफ़ॉल्ट रूप से, यह सिर्फ़ बच्चों को दिखेगा. हालांकि, .parent ने इसे scroll-timeline-root के तौर पर सेट किया है, इसलिए यह इससे जुड़ जाता है.
  • .subject एलिमेंट, --tl टाइमलाइन का इस्तेमाल करता है. यह अपने पूर्वज ट्री में ऊपर की ओर जाता है और .parent पर --tl ढूंढता है. .parent पर मौजूद --tl, .scroller के --tl की ओर इशारा कर रहा है. इसलिए, .subject, .scroller की स्क्रोल प्रोग्रेस टाइमलाइन को ट्रैक करेगा.

दूसरे शब्दों में कहें, तो timeline-root का इस्तेमाल करके, टाइमलाइन को किसी पूर्वज (इसे होस्टिंग भी कहा जाता है) तक ले जाया जा सकता है, ताकि पूर्वज के सभी बच्चे इसे ऐक्सेस कर सकें.

timeline-scope प्रॉपर्टी का इस्तेमाल, स्क्रोल टाइमलाइन और व्यू टाइमलाइन, दोनों के साथ किया जा सकता है.

ज़्यादा डेमो और संसाधन

इस लेख में, scroll-driven-animations.style की मिनी-साइट पर मौजूद सभी डेमो शामिल हैं. इस वेबसाइट पर, स्क्रोल-ड्रिवन ऐनिमेशन की मदद से क्या-क्या किया जा सकता है, यह दिखाने के लिए कई और डेमो शामिल किए गए हैं.

अतिरिक्त डेमो में से एक, एल्बम कवर की यह सूची है. हर कवर, 3D में घूमता है और सेंटर में स्पॉटलाइट की तरह दिखता है.

डेमो: कवर फ़्लो

✨ इसे खुद आज़माएं

इसके अलावा, position: sticky का इस्तेमाल करने वाले स्टैकिंग कार्ड का यह डेमो देखें. कार्ड के स्टैक होने पर, पहले से चिपके हुए कार्ड छोटे हो जाते हैं. इससे डेप्थ इफ़ेक्ट मिलता है. आखिर में, पूरा स्टैक एक ग्रुप के तौर पर स्लाइड होकर व्यू से बाहर चला जाता है.

डेमो: कार्ड स्टैक करना.

✨ इसे खुद आज़माएं

scroll-driven-animations.style पर भी टूल का एक कलेक्शन मौजूद है. जैसे, व्यू टाइमलाइन रेंज प्रोग्रेस विज़ुअलाइज़ेशन, जिसे इस पोस्ट में पहले शामिल किया गया था.

Google I/O ’23 में, वेब ऐनिमेशन में नया क्या है में स्क्रोल-ड्रिवन ऐनिमेशन के बारे में भी बताया गया है.