Panduan Membuat Scroll-driven Animation Hanya dengan CSS

• Tanpa JS atau library terpisah, animasi yang terhubung dengan scroll hanya dengan CSS dapat dibuat
• Dengan properti CSS seperti animation-timeline: scroll() / view(), animasi dapat berjalan sesuai posisi scroll atau saat elemen masuk ke viewport
• Dengan properti animation-range, Anda dapat mengatur secara rinci di bagian mana dalam viewport animasi dimulai/diakhiri
• Untuk pengguna yang sensitif terhadap gerakan, disarankan memanfaatkan media query prefers-reduced-motion
• Didukung mulai Safari 26 beta, sehingga cakupan pemanfaatan animasi scroll berbasis CSS menjadi jauh lebih luas

---

3 elemen animasi berbasis scroll

• Target: elemen sasaran yang akan diberi animasi (misalnya progress bar, gambar, dll.)
• Keyframes: mendefinisikan perubahan apa yang terjadi mengikuti scroll (sama seperti CSS @keyframes yang ada)
• Timeline: menentukan kapan dan bagaimana animasi berjalan (berbasis scroll/view, bukan waktu)

Timeline di CSS

• Animasi CSS tradisional pada dasarnya menggunakan document timeline (berbasis waktu)
• Dengan hadirnya properti animation-timeline (CSS Animations Level 2, 2023), animasi kini bisa berjalan berdasarkan beragam acuan selain waktu, seperti scroll dan masuk ke viewport

Timeline scroll()

• Timeline scroll() membuat animasi hanya berjalan ketika pengguna melakukan scroll
• Contoh: efek progress bar di bagian bawah yang terisi dari kiri ke kanan mengikuti 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 harus didefinisikan setelah properti animation agar berfungsi dengan benar

Pertimbangan aksesibilitas gerakan

• Untuk melindungi pengguna yang sensitif terhadap gerakan, disarankan menggunakan media query prefers-reduced-motion

  @media not (prefers-reduced-motion) {  
      /* kode animasi */  
  }  
  

Timeline view()

• Timeline view() memulai animasi ketika elemen target muncul di viewport
• Contoh: saat di-scroll, gambar melakukan slide dari kanan sekaligus fade-in

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

Mengontrol rentang progres dengan animation-range

• Secara default, animation-range adalah 0% (masuk viewport)~100% (keluar sepenuhnya)

• Contoh: animasi hanya berjalan sampai 50% area viewport

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

• Demi pengalaman pengguna, perlu menetapkan nilai range yang sesuai

• Saat mempertimbangkan aksesibilitas gerakan, gunakan bersama prefers-reduced-motion

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

Pemanfaatan lanjutan dan langkah berikutnya

• scroll() dan view() adalah fungsi yang dapat menerima berbagai opsi, seperti elemen scroller (default: nearest) atau sumbu (block, inline, x, y)
• Dengan animation-range, entry/exit, dan lainnya, UX yang lebih halus dapat dibuat
• Saat ini didukung lebih dulu di browser terbaru seperti Safari 26 beta, dan ke depan diperkirakan akan makin distandardisasi serta didukung lebih luas

[shakespeare]

Ternyata bisa diimplementasikan hanya dengan animation-timeline. Menarik sekali!