Studi kasus tentang performa animasi berbasis scroll

Yuriko Hirota

Apa yang baru dengan animasi berbasis scroll?

Animasi yang digerakkan oleh scroll adalah cara untuk menambahkan interaktivitas dan daya tarik visual ke situs atau aplikasi web Anda, yang dipicu oleh posisi scroll pengguna. Cara ini dapat menjadi cara yang bagus untuk mempertahankan engagement pengguna dan membuat situs Anda lebih menarik secara visual.

Sebelumnya, satu-satunya cara untuk membuat animasi berbasis scroll adalah dengan merespons peristiwa scroll di thread utama. Hal ini menyebabkan dua masalah utama:

• Scrolling dilakukan di thread terpisah dan oleh karena itu mengirimkan peristiwa scroll secara asinkron.
• Animasi thread utama dapat menyebabkan jank.

Hal ini membuat pembuatan animasi yang didorong scroll berperforma tinggi yang sinkron dengan scrolling menjadi mustahil atau sangat sulit.

Sekarang kami memperkenalkan sekumpulan API baru untuk mendukung animasi berbasis scroll, yang dapat Anda gunakan dari CSS atau JavaScript. API ini mencoba menggunakan resource thread utama sesedikit mungkin, sehingga membuat animasi yang digerakkan scroll jauh lebih mudah diterapkan, dan juga jauh lebih lancar. API animasi yang digerakkan scroll saat ini didukung di browser berikut:

Browser Support

• 115
• 115
• 
• 26

Source

Artikel ini membandingkan pendekatan baru dengan teknik JavaScript klasik untuk menunjukkan betapa mudah dan lancarnya animasi yang digerakkan scroll dengan API baru.

Catatan: Peningkatan performa berikut dari penggunaan animasi yang digerakkan scroll tersedia mulai dari Chrome 116.

Scroll-driven animations CSS API versus JavaScript klasik

Progress bar contoh berikut dibuat menggunakan teknik JavaScript class.

Dokumen merespons setiap kali peristiwa scroll terjadi untuk menghitung persentase scrollHeight yang telah di-scroll pengguna.

document.addEventListener("scroll&q>uot;, () = {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Demo berikut menunjukkan status progres yang sama menggunakan API baru dengan CSS.

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

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Fitur CSS animation-timeline yang baru, secara otomatis mengonversi posisi dalam rentang scroll menjadi persentase progres, sehingga melakukan semua tugas berat.

Sekarang, inilah bagian yang menarik—misalkan Anda menerapkan perhitungan yang sangat berat pada kedua versi situs yang akan menghabiskan sebagian besar resource thread utama.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Seperti yang mungkin Anda harapkan, versi JavaScript klasik menjadi janky dan lambat karena persimpangan resource thread utama. Di sisi lain, versi CSS sama sekali tidak terpengaruh oleh tugas JavaScript yang berat dan dapat merespons interaksi scroll pengguna.

Penggunaan CPU benar-benar berbeda di DevTools, seperti yang ditunjukkan pada screenshot berikut.

Demo berikut menunjukkan penerapan animasi yang digerakkan scroll yang dibuat oleh CyberAgent. Anda dapat melihat bahwa foto memudar saat Anda men-scroll.

Scroll-driven animations JavaScript API baru versus JavaScript klasik

Manfaat API baru ini tidak hanya terbatas pada CSS. Anda juga dapat membuat animasi berbasis scroll yang sangat lancar menggunakan JavaScript. Lihat contoh berikut:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Dengan demikian, Anda dapat membuat animasi status progres yang sama seperti yang ditampilkan dalam demo CSS sebelumnya hanya menggunakan JavaScript. Teknologi yang mendasarinya sama dengan versi CSS. API ini mencoba menggunakan sesedikit mungkin resource thread utama, sehingga membuat animasi jauh lebih lancar jika dibandingkan dengan pendekatan JavaScript klasik.

Selain itu, API baru ini berfungsi bersama dengan Web Animations API (WAAPI) dan CSS Animations API yang sudah ada untuk mengaktifkan animasi yang digerakkan scroll secara deklaratif.

Demo dan referensi lainnya

Anda dapat melihat berbagai penerapan animasi yang digerakkan scroll melalui situs demo ini, tempat Anda dapat membandingkan demo menggunakan API baru ini dari CSS dan JavaScript.

Jika Anda tertarik untuk mempelajari lebih lanjut animasi yang digerakkan oleh scroll baru, baca artikel ini dan pembahasan di I/O 2023.