Digital Transformation
CSS Scroll-Driven Animations (animation-timeline)
TL;DR: CSS Scroll-Driven Animations adalah fitur CSS native yang memicu animasi berdasarkan posisi scroll, bukan waktu, lewat property animation-timeline dengan fungsi scroll() atau view(). Per 2026, fitur ini bisa menggantikan ratusan baris JavaScript Intersection Observer dan library scrolling, menghemat 20-60 KB bundle.
Apa itu CSS Scroll-Driven Animations?
CSS Scroll-Driven Animations adalah spesifikasi CSS yang memungkinkan satu animasi dijalankan berdasarkan progres scroll, baik scroll global halaman maupun visibilitas elemen di viewport. Mekanismenya pakai property animation-timeline yang menerima nilai scroll() (mengikuti scroll container) atau view() (mengikuti masuk-keluarnya elemen di viewport). Konsep ini berdekatan dengan CSS View Transition Types yang juga merupakan animasi deklaratif, tapi scroll-driven khusus terikat pada gerak scroll.
Analogi sederhana: dulu kita menulis JS Intersection Observer untuk memicu animasi saat elemen masuk viewport. Dengan scroll-driven, browser sendiri yang menjadi mesin animasinya, tanpa loop JavaScript yang membebani INP Event Handler Budget.
Cara Kerja Singkat
| Timeline Fungsi | Kegunaan | Contoh Sederhana |
|---|---|---|
| scroll() | Animasi mengikuti progres scroll container | Progress bar di header |
| view() | Animasi mengikuti elemen masuk-keluar viewport | Fade-in card produk |
Contoh: .card { animation: fade linear; animation-timeline: view(); animation-range: entry 0% cover 50%; }. Tidak ada JavaScript. Browser otomatis memetakan progres animasi ke posisi scroll elemen.
Kenapa Penting?
Untuk pebisnis dan marketer Indonesia, dampak terbesar fitur ini adalah pangkas bundle JavaScript dan pulihkan Core Web Vitals. Saat membangun katalog Atmo LMS, mengganti library scroll-trigger dengan CSS scroll-driven menghemat sekitar 28-45 KB bundle per halaman dan menurunkan INP karena tidak ada lagi listener scroll JavaScript yang berebut main thread. Dukungan browser sudah cukup luas per 2026, tapi tetap perlu fallback @supports untuk Safari versi lama. Detail dukungan dan sintaks lengkap tersedia di dokumentasi MDN scroll-driven animations.
Pertanyaan Umum
Apakah perlu polyfill?
Untuk audiens utama Indonesia (Chrome, Edge, Android Chrome), tidak perlu polyfill. Tapi untuk Safari versi lama, sediakan fallback CSS sederhana via @supports (animation-timeline: scroll()) supaya pengalaman tidak rusak.
Bisa dikombinasi dengan Framer Motion?
Bisa, tapi sering tidak perlu. Untuk animasi berbasis scroll, CSS scroll-driven lebih ringan. Framer Motion lebih cocok untuk animasi state UI kompleks. Praktik yang Vito Atmo pakai: scroll-driven untuk efek halaman, library JS untuk interaksi tombol/modal.
Istilah Terkait