CSS Scroll-Driven Animations: Membuat Animasi Mengikuti Guliran Halaman

Animasi web biasanya berjalan berdasarkan waktu, tetapi CSS Scroll-Driven Animations memungkinkan progres animasi mengikuti posisi gulir atau posisi elemen di dalam area gulir. Dengan pendekatan ini, pengembang dapat membuat indikator kemajuan membaca, efek masuk saat bagian halaman terlihat, atau perubahan visual yang terhubung langsung dengan gerakan pengguna tanpa harus terus menghitung posisi melalui JavaScript.

Apa itu Scroll-Driven Animations?

Scroll-Driven Animations menghubungkan timeline animasi dengan aktivitas gulir. Dua konsep utamanya adalah scroll progress timeline, yang mengikuti progres scroll container, dan view progress timeline, yang mengikuti perjalanan elemen melintasi area pandang. Timeline tersebut dapat dipakai bersama properti animasi CSS sehingga perubahan gaya mengikuti posisi gulir, bukan hanya durasi waktu.

Dukungan fitur berbeda antarbrowser dan versi. Periksa kompatibilitas browser target sebelum menjadikannya bagian penting pengalaman pengguna, dan sediakan tampilan dasar yang tetap masuk akal ketika fitur tidak tersedia.

Contoh indikator progres halaman

Indikator progres dapat memberi pembaca gambaran seberapa jauh mereka telah menggulir halaman. Pada browser yang mendukung sintaks scroll timeline, pola berikut dapat menjadi titik awal:

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 4px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
  animation: progress-grow auto linear;
  animation-timeline: scroll(root block);
}

@keyframes progress-grow {
  to { transform: scaleX(1); }
}

Contoh tersebut bersifat ilustratif dan perlu diuji pada browser yang ditargetkan. Pastikan elemen indikator berada di atas konten, tidak menutupi kontrol, dan tetap terlihat dengan kontras yang memadai. Untuk halaman yang sangat panjang atau memakai scroll container khusus, sesuaikan timeline dengan container yang benar.

Menghubungkan animasi dengan elemen

View timeline berguna saat elemen bergerak memasuki atau meninggalkan viewport. Misalnya, kartu dapat memudar masuk ketika terlihat. Gunakan efek yang ringan dan jangan membuat informasi penting hanya muncul setelah animasi karena pengguna yang memakai teknologi bantu atau browser tanpa dukungan tetap harus dapat mengakses kontennya.

.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Rentang animasi perlu disesuaikan dengan panjang elemen dan ukuran viewport. Efek yang terlalu panjang dapat terasa lambat, sedangkan transformasi besar dapat mengganggu pembaca. Uji pada ponsel, layar kecil, dan halaman yang berisi elemen dengan tinggi berbeda.

Kinerja dan pilihan properti

Animasi yang memengaruhi transform dan opacity biasanya lebih mudah dioptimalkan dibanding perubahan yang memicu perhitungan layout berulang. Hindari menganimasikan banyak properti mahal pada puluhan elemen sekaligus. Ukur performa pada perangkat nyata, terutama ketika halaman memuat gambar besar, iklan, atau komponen interaktif.

Scroll-driven tidak otomatis berarti bebas biaya. Efek kompleks, filter berat, dan terlalu banyak elemen bergerak tetap dapat menguras baterai atau membuat guliran terasa tidak mulus. Pilih efek yang memperjelas struktur halaman, bukan sekadar dekorasi.

Aksesibilitas dan preferensi gerakan

Gerakan yang terus mengikuti scroll dapat mengganggu sebagian pengguna. Hormati preferensi sistem melalui prefers-reduced-motion dan sediakan tampilan statis yang tetap menyampaikan informasi. Jangan menyembunyikan teks atau kontrol penting di balik animasi; konten harus tetap tersedia meskipun animasi dinonaktifkan.

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Perhatikan juga fokus keyboard, kontras warna, dan urutan baca. Efek visual tidak boleh mengubah urutan semantik dokumen atau membuat kontrol sulit ditemukan.

Fallback dan strategi pengujian

Mulailah dengan CSS yang menampilkan semua konten secara normal. Tambahkan animasi hanya ketika browser mendukung properti yang diperlukan, misalnya melalui pemeriksaan fitur seperti @supports (animation-timeline: view()). Jangan jadikan animasi sebagai satu-satunya cara mengungkapkan status atau informasi.

Uji ketika jendela berubah ukuran, gambar terlambat dimuat, pengguna melompat ke bagian tertentu melalui tautan, dan halaman menggunakan scroll container selain root. Periksa pula perilaku saat JavaScript dinonaktifkan, karena animasi CSS sebaiknya tidak bergantung pada skrip jika tidak diperlukan.

Kesimpulan

CSS Scroll-Driven Animations membuat animasi dapat mengikuti posisi gulir tanpa logika JavaScript yang terus berjalan. Gunakan scroll timeline untuk progres container dan view timeline untuk perjalanan elemen di viewport. Pilih properti yang ringan, sediakan fallback, hormati preferensi pengurangan gerakan, dan uji di perangkat nyata. Dengan desain yang sederhana, teknik ini dapat menambah konteks visual tanpa mengorbankan aksesibilitas atau performa.