Studi kasus tentang performa animasi berbasis scroll

Yuriko Hirota

Apa yang baru di 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 interaksi pengguna dan membuat situs Anda lebih menarik secara visual.

Sebelumnya, satu-satunya cara untuk membuat animasi yang digerakkan 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 mengalami jank.

Hal ini membuat pembuatan animasi berbasis scroll berperforma tinggi yang sinkron dengan scrolling menjadi tidak mungkin atau sangat sulit.

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

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

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", () => {
  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 progress bar 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 baru secara otomatis mengonversi posisi dalam rentang scroll menjadi persentase progres, sehingga melakukan semua tugas berat.

Sekarang, inilah bagian yang menarik—misalkan Anda menerapkan penghitungan 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 duga, versi JavaScript klasik menjadi tidak lancar 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.

JavaScript API animasi yang digerakkan scroll baru versus JavaScript klasik

Manfaat API baru 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 scroll deklaratif.

Demo dan referensi lainnya

Anda dapat melihat berbagai penerapan animasi yang dikontrol 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, lihat artikel ini dan pembahasan I/O 2023 ini.