Digital Transformation
Scroll-driven Animation
Scroll-driven Animation adalah animasi CSS native yang dikendalikan oleh posisi scroll tanpa JavaScript, didukung Chrome 115+ dan menjadi cara hemat performa untuk efek scroll modern.
TL;DR: Scroll-driven Animation memungkinkan animasi CSS yang dikontrol langsung oleh posisi scroll user tanpa JavaScript listener. Tersedia native di Chrome 115+ dan Edge sejak 2023, mengurangi beban main thread dibanding library seperti GSAP ScrollTrigger.
Apa itu Scroll-driven Animation?
Scroll-driven Animation adalah fitur CSS yang mengikat progress animasi ke posisi scroll, bukan ke waktu. Sebelumnya, efek seperti parallax atau progress bar pembacaan artikel butuh JavaScript dengan event listener scroll yang sering menjadi penyebab jank dan menurunkan INP.
API ini terdiri dari dua mekanisme: scroll-timeline untuk animasi berdasarkan scroll global atau elemen tertentu, dan view-timeline untuk animasi yang ter-trigger saat elemen masuk viewport.
Cara Kerja Singkat
Browser menjalankan animasi di compositor thread, terpisah dari main thread JavaScript. Hasilnya, animasi tetap halus 60fps bahkan saat main thread sibuk eksekusi script tracking atau hydration.
| Properti CSS | Fungsi |
|---|---|
animation-timeline: scroll() | Ikat animasi ke scroll halaman |
animation-timeline: view() | Trigger saat elemen masuk viewport |
animation-range | Tentukan titik awal dan akhir |
view-timeline-name | Penamaan untuk dipanggil ulang |
Kenapa Penting?
Untuk marketer, scroll-driven animation menjaga performa landing page tetap optimal sambil menghadirkan efek visual modern yang meningkatkan engagement. Untuk developer di Indonesia yang menggunakan Next.js, ini cara mengurangi dependency JavaScript animation library yang umumnya menambah 30-100 KB ke bundle.
Praktik per April 2026 menunjukkan adopsi cepat di portfolio personal brand premium dan landing page produk SaaS karena trade-off performance-to-impact-nya sangat baik.
Pertanyaan Umum
Apakah scroll-driven animation didukung Safari?
Per April 2026, Safari masih di balik flag eksperimental. Gunakan dengan @supports (animation-timeline: scroll()) untuk progressive enhancement.
Apakah scroll-driven animation menggantikan library seperti GSAP?
Untuk efek scroll sederhana ya, tapi animasi kompleks dengan timeline bercabang masih lebih praktis dengan library. Pertimbangkan dampak ke Core Web Vitals.
Istilah Terkait