Studi kasus tentang performa animasi berbasis scroll

Yuriko Hirota

Apa yang baru di animasi berbasis scroll?

Animasi berbasis 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 membuat pengguna tetap tertarik 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 sehingga memberikan peristiwa scroll secara asinkron.
• Animasi thread utama rentan terhadap jank.

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

Kini kami memperkenalkan serangkaian 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 animasi berbasis scroll jauh lebih mudah diterapkan, dan juga jauh lebih lancar. API animasi berbasis scroll saat ini didukung di browser berikut:

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

CSS API animasi berbasis scroll versus JavaScript klasik

Status progres contoh berikut dibuat menggunakan teknik JavaScript klasik.

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 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 baru secara otomatis mengonversi posisi dalam rentang scroll menjadi persentase progres, sehingga melakukan semua pekerjaan berat.

Sekarang, inilah bagian yang menarik—misalnya 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 pekerjaan 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 berbasis scroll yang dibuat oleh CyberAgent. Anda dapat melihat bahwa foto memudar saat Anda men-scroll.

JavaScript API animasi berbasis 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,
    }),
  }
);

Hal ini memungkinkan Anda 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 resource thread utama sesedikit mungkin, sehingga 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 ada untuk mengaktifkan animasi berbasis scroll deklaratif.

Demo dan resource lainnya

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

Jika Anda tertarik untuk mempelajari animasi berbasis scroll baru lebih lanjut, lihat artikel ini dan video presentasi I/O 2023.