Animasi yang dipicu scroll CSS akan segera hadir.

Bramus

Dipublikasikan: 12 Desember 2025

Pada tahun 2023, kami meluncurkan animasi berbasis scroll yang memungkinkan Anda memajukan (atau memundurkan) animasi melalui scrolling. Dengan animasi berbasis scroll, progres animasi akan maju dari 0% hingga 100% saat Anda men-scroll. Jika Anda berhenti men-scroll, animasi akan dijeda; jika Anda men-scroll kembali ke atas, animasi akan berbalik.

Babak berikutnya untuk animasi berbasis scroll akan hadir pada tahun 2026, dengan animasi yang dipicu scroll akan hadir di Chrome 145. Ini adalah animasi berbasis waktu yang dipicu saat melintasi offset scroll tertentu.

Ucapkan selamat tinggal pada IntersectionObserver untuk jenis efek ini, karena Anda kini dapat melakukannya secara deklaratif di CSS.

Pemicu linimasa, pemicu animasi, dan tindakan

Memicu animasi

Untuk menyiapkan animasi yang dipicu scroll di CSS, mulailah dengan animasi CSS reguler yang dilampirkan ke elemen:

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

Animasi ini menggunakan DocumentTimeline sebagai penggeraknya dan berjalan selama 0,35 detik. Animasi dipicu secara otomatis setelah halaman dimuat. Untuk mengubah pemicu, gunakan properti CSS animation-trigger yang baru:

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

Di sini, animasi disetel untuk dipicu oleh pemicu --t. Saat pemicu tersebut diaktifkan, tindakan play-forwards dipanggil pada animasi dan saat pemicu dinonaktifkan, tindakan play-backwards dipanggil.

Spesifikasi berisi daftar lengkap tindakan.

Buat pemicu

Namun, apa pemicunya?--t Ini adalah pemicu dengan nama --t. Khusus untuk animasi yang dipicu scroll, ini adalah "pemicu linimasa" yang menggunakan Linimasa Progres Scroll atau Linimasa Progres Tampilan sebagai sumbernya.

Untuk menentukan pemicu linimasa, gunakan properti timeline-trigger (atau singkatan terkaitnya). Misalnya, untuk membuat pemicu bernama --t yang menggunakan linimasa tampilan sebagai sumbernya, gunakan kode berikut:

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

Pemicu --t yang dibuat ini diaktifkan dan dinonaktifkan berdasarkan linimasa tampilan yang terkait dengan elemen yang cocok. Karena rentang default untuk linimasa tampilan adalah rentang cover, pemicu juga diaktifkan dan dinonaktifkan saat berada di dalam atau di luar rentang tersebut.

Menyesuaikan rentang pemicu

Untuk menyesuaikan posisi saat pemicu harus aktif atau tidak aktif, tentukan rentang aktivasi dan aktif pada pemicu. Dalam contoh berikut, rentang aktivasi ditetapkan ke entry 100% exit 0%, yang berarti pemicu akan diaktifkan setelah subjek berada dalam rentang tersebut.

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

Karena tidak ada rentang aktif yang ditentukan dalam cuplikan sebelumnya, rentang aktivasi juga digunakan sebagai rentang aktif. Saat berada di luar rentang aktif tersebut, pemicu akan dinonaktifkan.

Jika digabungkan dengan animation-trigger yang telah ditentukan, hal ini akan menghasilkan animasi yang diputar maju saat subjek telah sepenuhnya memasuki area scroll dan animasi yang diputar mundur saat subjek akan keluar dari area scroll.

Rentang aktivasi dan aktif dapat berbeda. Contoh:

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

Di sini, pemicu diaktifkan saat subjek berada dalam rentang entry 100% exit 0%. Pemicu akan tetap aktif hingga keluar dari rentang entry 0% exit 100%.

Secara visual, hal ini akan menghasilkan animasi yang diputar ke depan saat subjek memasuki area scroll dan, tidak seperti sebelumnya, animasi akan tetap aktif hingga subjek sepenuhnya keluar dari area scroll.

Membatasi cakupan pemicu

Pemicu dapat dilihat secara global, yang berarti bahwa kecocokan terakhir yang mendeklarasikan pemicu dengan nama tertentu akan "menang". Untuk membatasi visibilitas pemicu, gunakan properti trigger-scope. Hal ini mirip dengan cara penggunaan anchor-scope.

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

Jika memiliki aturan CSS yang mendeklarasikan pemicu dan cocok dengan beberapa elemen, Anda harus menggunakan trigger-scope.

Demo

Dalam demo berikut, formulir dibagi di berbagai bagian tinggi penuh. Saat setiap bagian formulir muncul, bagian tersebut akan dianimasikan menggunakan animasi yang dipicu scroll. Saat keluar dari area scroll, item akan dianimasikan keluar.

Logika animasi yang dipicu scroll untuk ini adalah:

@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;
}

Jika diuraikan, kode tersebut akan berbunyi:

• timeline-trigger diberi nama --t dengan sumbernya ditetapkan ke linimasa tampilan yang melacak elemen yang cocok.
• Rentang aktivasi untuk pemicu adalah contain 15% contain 85%. Saat subjek berada dalam rentang tersebut, pemicu akan menjadi aktif.
• Saat diaktifkan, pemicu tetap aktif selama subjek berada dalam rentang aktif entry 100% exit 0%.
• Animasi unclip dilampirkan ke elemen.
• Animasi disetel untuk menggunakan --t sebagai sumber pemicunya. Saat pemicu menjadi aktif, animasi mulai diputar ke arah maju.
• Saat pemicu dinonaktifkan–yang terjadi saat subjek keluar dari rentang aktif–animasi diputar mundur.
• Isi kartu juga bergerak masuk dan keluar menggunakan pemicu --t yang sama.

Contoh ini mencakup penggantian menggunakan IntersectionObserver untuk browser yang tidak mendukung timeline-trigger.

Demo lainnya

Jika Anda tidak bisa berhenti menggunakan animasi yang dipicu scroll, lihat demo berikut:

• Teks Masuk
• Bertemu monster (scrollytelling)
• Bentuk yang berubah

Masukan

Kami tertarik dengan masukan untuk terus meningkatkan kualitas fitur ini. Hubungi kami di media sosial, atau ajukan masalah di CSS Working Group untuk memberikan masukan.

Jika Anda menemukan bug, laporkan bug Chromium untuk memberi tahu kami. Daftar bug yang diketahui: lihat Pelacak Bug Chromium.