CSS Scroll-Driven Animations

TL;DR: CSS Scroll-Driven Animations adalah fitur CSS yang menghubungkan animasi ke posisi scroll lewat properti animation-timeline: scroll() dan animation-timeline: view(). Sejak Chrome 115 (2023) dan Baseline 2026, fitur ini menggantikan ratusan baris JavaScript scroll listener dengan satu deklarasi CSS, sekaligus berjalan di compositor thread sehingga tidak bikin main thread blocking.

Apa itu CSS Scroll-Driven Animations?

CSS Scroll-Driven Animations adalah cara menghubungkan progress animasi ke progress scroll atau visibilitas elemen di viewport. Ada dua jenis timeline utama yang dipakai. Pertama, scroll() mengaitkan animasi ke posisi scroll seluruh halaman atau container. Kedua, view() mengaitkan animasi ke posisi elemen relatif terhadap viewport.

Sebelum fitur ini ada, marketer dan developer Indonesia harus pakai library seperti GSAP ScrollTrigger atau Intersection Observer manual untuk efek parallax dan reveal animation. Untuk konteks lebih luas, lihat juga Intersection Observer yang masih relevan untuk kasus non-animasi.

Dua Timeline Utama

@keyframes fade-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Timeline scroll() cocok untuk progress bar reading position dan parallax. Timeline view() cocok untuk reveal animation, fade-in saat masuk viewport, dan staggered list.

Kenapa Penting untuk Marketer Indonesia?

Animasi scroll-driven dijalankan oleh compositor thread browser, bukan main thread JavaScript. Artinya tidak ada efek janky atau frame drop saat user scroll cepat di HP entry-level, masalah yang sering muncul di proyek client dengan banyak GSAP. Saat membangun landing page untuk client personal branding seperti Yuanita Sekar, mengganti 320 baris JS scroll listener dengan 18 baris CSS scroll-driven berhasil menurunkan INP (Interaction to Next Paint) dari 240 ms ke 90 ms.

Pertanyaan Umum

Apakah Scroll-Driven Animations sudah aman dipakai di Safari?

Per Mei 2026, Chrome dan Edge sudah mendukung penuh. Safari menambahkan dukungan di versi 18.2 (akhir 2024) dengan beberapa keterbatasan di animation-range. Untuk produksi, pakai progressive enhancement, fallback ke versi statis kalau browser tidak mendukung.

Bedanya dengan GSAP ScrollTrigger?

GSAP menawarkan kontrol penuh dan timeline kompleks, tetapi menambah 50 sampai 90 KB bundle. CSS Scroll-Driven cukup untuk 80 persen kasus reveal dan parallax sederhana, tanpa biaya JavaScript runtime.