सिर्फ CSS से Scroll-driven Animation लागू करने की गाइड

• अलग JS या लाइब्रेरी के बिना, सिर्फ CSS से scroll-linked animation लागू किया जा सकता है
• animation-timeline: scroll() / view() जैसी CSS properties से scroll position, viewport में entry आदि के अनुसार animation को आगे बढ़ाया जा सकता है
• animation-range property से यह बारीकी से नियंत्रित किया जा सकता है कि animation viewport के किस हिस्से में शुरू/खत्म होगा
• motion के प्रति संवेदनशील users के लिए prefers-reduced-motion media query के उपयोग की सिफारिश की जाती है
• Safari 26 beta से support उपलब्ध है, और CSS-आधारित scroll animation के उपयोग का दायरा काफी बढ़ गया है

---

scroll-आधारित animation के 3 तत्व

• Target: वह element जिस पर animation लागू होगा (जैसे progress bar, image आदि)
• Keyframes: scroll के अनुसार क्या बदलाव होगा, इसकी परिभाषा (मौजूदा CSS @keyframes जैसी ही)
• Timeline: animation कब और कैसे चलेगा, यह तय करता है (time-based नहीं, बल्कि scroll/view-based)

CSS में Timeline

• पारंपरिक CSS animation मूल रूप से document timeline (time-based) का उपयोग करते हैं
• animation-timeline property का परिचय (CSS Animations Level 2, 2023): time के अलावा scroll, viewport entry जैसे अलग-अलग आधारों पर भी animation चल सकता है

scroll() timeline

• scroll() timeline में animation तभी आगे बढ़ता है जब user scroll करता है
• उदाहरण: नीचे का progress bar scroll के साथ बाएँ से दाएँ भरता है

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline को सही ढंग से काम करने के लिए animation property के बाद define करना चाहिए

motion accessibility पर विचार

• motion-sensitive users की सुरक्षा के लिए prefers-reduced-motion media query के उपयोग की सिफारिश की जाती है

  @media not (prefers-reduced-motion) {  
      /* 애니메이션 코드 */  
  }  
  

view() timeline

• view() timeline में target element के viewport में दिखने पर animation शुरू होता है
• उदाहरण: scroll करने पर image दाएँ से slide होकर fade-in होती है

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

animation-range से progression range नियंत्रित करना

• डिफ़ॉल्ट रूप से animation-range 0% (viewport में entry)~100% (पूरी तरह exit) होता है

• उदाहरण: animation को viewport के सिर्फ 50% हिस्से तक चलाना

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• बेहतर user experience के लिए उपयुक्त range value सेट करना ज़रूरी है

• motion accessibility को ध्यान में रखते हुए, इसे prefers-reduced-motion के साथ उपयोग करें

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

उन्नत उपयोग और अगले कदम

• scroll(), view() functions हैं, जिनमें scroller element (डिफ़ॉल्ट: nearest) या axis (block, inline, x, y) जैसे कई options दिए जा सकते हैं
• animation-range, entry/exit आदि से और अधिक बारीक UX लागू किया जा सकता है
• Safari 26 beta जैसे नए browsers में पहले support उपलब्ध है, और आगे चलकर standardization तथा support और बढ़ने की उम्मीद है

[shakespeare]

इसे सिर्फ animation-timeline से ही लागू किया जा सकता है। काफ़ी दिलचस्प है!