सीएसएस के स्क्रोल ट्रिगर वाले ऐनिमेशन की सुविधा जल्द ही उपलब्ध होगी!

Bramus

पब्लिश किया गया: 12 दिसंबर, 2025

साल 2023 में, हमने स्क्रोल-ड्रिवन ऐनिमेशन लॉन्च किए थे. इनकी मदद से, स्क्रोल करके किसी ऐनिमेशन को आगे या पीछे किया जा सकता है. स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, स्क्रोल करने पर ऐनिमेशन की प्रोग्रेस 0% से 100% तक बढ़ती है. स्क्रोल करना बंद करने पर, ऐनिमेशन रुक जाता है. वापस ऊपर की ओर स्क्रोल करने पर, ऐनिमेशन उलटा हो जाता है.

स्क्रोल करने पर दिखने वाले ऐनिमेशन की सुविधा, 2026 में उपलब्ध होगी. स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन की सुविधा, Chrome 145 में उपलब्ध होगी. ये समय के हिसाब से चलने वाले ऐनिमेशन होते हैं. ये तब ट्रिगर होते हैं, जब स्क्रोल ऑफ़सेट किसी तय सीमा को पार कर जाता है.

इस तरह के इफ़ेक्ट के लिए, अब IntersectionObserver का इस्तेमाल नहीं किया जा सकता. अब इसे सीएसएस में किया जा सकता है.

टाइमलाइन ट्रिगर, ऐनिमेशन ट्रिगर, और कार्रवाइयां

ऐनिमेशन ट्रिगर करना

सीएसएस में स्क्रोल ट्रिगर करने वाला ऐनिमेशन सेट अप करने के लिए, किसी एलिमेंट से जुड़े सामान्य सीएसएस ऐनिमेशन से शुरुआत करें:

animation: unclip 0.35s ease-in-out both;

इस ऐनिमेशन में DocumentTimeline का इस्तेमाल किया गया है और यह 0.35 सेकंड तक चलता है. पेज लोड होने के बाद, ऐनिमेशन अपने-आप ट्रिगर हो जाता है. ट्रिगर बदलने के लिए, नई animation-trigger सीएसएस प्रॉपर्टी का इस्तेमाल करें:

animation-trigger: --t play-forwards play-backwards;

यहां, ऐनिमेशन को ट्रिगर --t से ट्रिगर होने के लिए सेट किया गया है. ट्रिगर चालू होने पर, ऐनिमेशन पर play-forwards कार्रवाई शुरू हो जाती है. वहीं, ट्रिगर बंद होने पर, play-backwards कार्रवाई शुरू हो जाती है.

स्पेसिफ़िकेशन में, कार्रवाइयों की पूरी सूची शामिल होती है.

ट्रिगर बनाएं

लेकिन, यह --t ट्रिगर क्या है? यह --t नाम का ट्रिगर है. खास तौर पर, स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन के लिए, यह "टाइमलाइन ट्रिगर" होता है. यह स्क्रोल प्रोग्रेस टाइमलाइन या व्यू प्रोग्रेस टाइमलाइन को अपने सोर्स के तौर पर इस्तेमाल करता है.

टाइमलाइन ट्रिगर तय करने के लिए, timeline-trigger प्रॉपर्टी या उससे जुड़ी लंबी प्रॉपर्टी का इस्तेमाल करें. उदाहरण के लिए, --t नाम का ट्रिगर बनाने के लिए, व्यू टाइमलाइन को सोर्स के तौर पर इस्तेमाल करें. इसके लिए, यह तरीका अपनाएं:

timeline-trigger-name: --t;
timeline-trigger-source: view();

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

ट्रिगर की रेंज में बदलाव करना

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

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

ऊपर दिए गए स्निपेट में कोई चालू रेंज नहीं दी गई है. इसलिए, चालू करने की रेंज का इस्तेमाल चालू रेंज के तौर पर भी किया जाता है. उस ऐक्टिव रेंज से बाहर होने पर, ट्रिगर बंद हो जाता है.

animation-trigger के साथ इस प्रॉपर्टी का इस्तेमाल करने पर, जब विषय स्क्रोलपोर्ट में पूरी तरह से आ जाता है, तो ऐनिमेशन आगे की ओर चलता है. वहीं, जब विषय स्क्रोलपोर्ट से बाहर निकलने वाला होता है, तो ऐनिमेशन पीछे की ओर चलता है.

ऐसा हो सकता है कि चालू होने की तारीख और चालू रहने की अवधि अलग-अलग हो. उदाहरण के लिए:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

यहां, विषय के entry 100% exit 0% रेंज में होने पर ट्रिगर चालू होता है. ट्रिगर तब तक चालू रहता है, जब तक वह entry 0% exit 100% रेंज से बाहर नहीं निकल जाता.

इससे, स्क्रोलपोर्ट में विषय के आने पर ऐनिमेशन आगे की ओर चलता है. साथ ही, पहले के मुकाबले यह तब तक चालू रहता है, जब तक विषय पूरी तरह से स्क्रोलपोर्ट से बाहर नहीं निकल जाता.

ट्रिगर के स्कोप को सीमित करना

ट्रिगर, सभी के लिए उपलब्ध होते हैं. इसका मतलब है कि जिस ट्रिगर का नाम "जीत" है वह आखिरी मैच है. ट्रिगर को सीमित लोगों को दिखाने के लिए, trigger-scope प्रॉपर्टी का इस्तेमाल करें. यह anchor-scope के इस्तेमाल के तरीके जैसा ही है.

trigger-scope: --t; /* List of dashed idents, or `all` */

अगर आपके पास कोई ऐसा सीएसएस नियम है जो ट्रिगर का एलान करता है और कई एलिमेंट से मेल खाता है, तो आपको trigger-scope का इस्तेमाल करना होगा.

डेमो

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

इसके लिए, स्क्रोल ट्रिगर किए गए ऐनिमेशन का लॉजिक यह है:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

कोड को अलग-अलग करके देखने पर, यह इस तरह दिखता है:

• timeline-trigger का नाम --t है. इसका सोर्स, व्यू टाइमलाइन पर सेट होता है. यह टाइमलाइन, मैच किए गए एलिमेंट को ट्रैक करती है.
• ट्रिगर के चालू होने की सीमा contain 15% contain 85% है. जब सब्जेक्ट उस रेंज में होता है, तब ट्रिगर चालू हो जाता है.
• चालू होने पर, ट्रिगर तब तक चालू रहता है, जब तक विषय entry 100% exit 0% की सक्रिय सीमा में है.
• unclip ऐनिमेशन को एलिमेंट से अटैच किया गया है.
• ऐनिमेशन को ट्रिगर करने के लिए, --t को ट्रिगर सोर्स के तौर पर सेट किया गया है. ट्रिगर के चालू होने पर, ऐनिमेशन आगे की ओर चलना शुरू हो जाता है.
• जब ट्रिगर बंद हो जाता है, तब ऐनिमेशन पीछे की ओर चलने लगता है. ट्रिगर तब बंद होता है, जब सब्जेक्ट ऐक्टिव रेंज से बाहर चला जाता है.
• कार्ड में मौजूद कॉन्टेंट भी, उसी ट्रिगर --t का इस्तेमाल करके ऐनिमेट होता है.

इस उदाहरण में, उन ब्राउज़र के लिए IntersectionObserver का इस्तेमाल करके फ़ॉलबैक शामिल किया गया है जिन पर timeline-trigger काम नहीं करता.

ज़्यादा डेमो

अगर आपको स्क्रोल ट्रिगर किए गए ऐनिमेशन के बारे में ज़्यादा जानना है, तो यहां दिए गए डेमो देखें:

• फ़्लाय-इन टेक्स्ट
• Meet the monsters (scrollytelling)
• मॉर्फ़िंग शेप

सुझाव/राय दें या शिकायत करें

हम इस सुविधा को बेहतर बनाने के लिए, आपके सुझाव/राय या शिकायत का इंतज़ार कर रहे हैं. सुझाव/राय देने या शिकायत करने के लिए, सोशल मीडिया पर हमसे संपर्क करें या सीएसएस वर्किंग ग्रुप में समस्या की शिकायत करें.

अगर आपको कोई गड़बड़ी मिलती है, तो हमें बताने के लिए Chromium में गड़बड़ी की शिकायत करें. ज्ञात गड़बड़ियों की सूची: Chromium Bug Tracker देखें.