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

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

Bramus

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

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

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

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

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

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

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

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

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

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

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

सीएसएस में ऐनिमेशन बनाने के लिए, @keyframes at-rule का इस्तेमाल करके, कीफ़्रेम का सेट तय करें. 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% तक बढ़ती है.

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

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

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

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

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

व्यू की प्रोग्रेस टाइमलाइन तब शुरू होती है, जब कोई ऑब्जेक्ट स्क्रोलर से इंटरसेक्शन करना शुरू करता है और तब खत्म होती है, जब ऑब्जेक्ट स्क्रोलर से इंटरसेक्शन करना बंद कर देता है. नीचे दिए गए विज़ुअलाइज़ेशन में, यह देखा जा सकता है कि जब ऑब्जेक्ट स्क्रोल कंटेनर में आता है, तो प्रोग्रेस 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 ऐनिमेशन में बदल जाता है. ऐसा करने के लिए, नाम वाली स्क्रोल प्रोग्रेस टाइमलाइन --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-ऐक्सिस पर #progress को 0% से 100% तक स्केल करता है.

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

'प्रगति की टाइमलाइन देखें' सुविधा का इस्तेमाल करना

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

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

• <axis>, स्क्रोल प्रोग्रेस टाइमलाइन में मौजूद <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: यह उस रेंज को दिखाता है जिसमें प्रिंसिपल बॉक्स, स्क्रोलपोर्ट में व्यू की प्रोग्रेस की दिखने की रेंज में पूरी तरह से शामिल होता है या पूरी तरह से कवर करता है. यह इस बात पर निर्भर करता है कि ऑब्जेक्ट, स्क्रोलर से लंबा है या छोटा.

रेंज तय करने के लिए, आपको रेंज-शुरू और रेंज-खत्म सेट करना होगा. हर रेंज में रेंज-नेम (ऊपर दी गई सूची देखें) और रेंज-ऑफ़सेट होता है. इससे रेंज-नेम में पोज़िशन तय की जाती है. रेंज-ऑफ़सेट आम तौर पर 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%',
  }
);

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

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

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

जब range-start और range-end, एक ही range-name को टारगेट करते हैं और पूरी रेंज में फैले होते हैं, यानी 0% से 100% तक–तो वैल्यू को सिर्फ़ रेंज के नाम तक छोटा किया जा सकता है. उदाहरण के लिए, 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();
}

keyframe में रेंज की जानकारी होती है, इसलिए आपको 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 में वेब ऐनिमेशन में नया क्या है सेक्शन में भी बताया गया है.