Studi kasus tentang performa animasi berbasis scroll

Apa yang baru dengan animasi berbasis scroll?

Animasi berbasis scroll adalah cara untuk menambahkan interaktivitas dan minat visual ke situs atau aplikasi web Anda, yang dipicu oleh posisi scroll pengguna. Ini bisa menjadi cara yang bagus untuk membuat pengguna tetap berinteraksi dan membuat {i>website<i} 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 peristiwa scroll akan dikirimkan secara asinkron.
• Animasi thread utama dapat mengalami jank.

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

Kini kami memperkenalkan kumpulan API baru untuk mendukung animasi berbasis scroll, yang bisa Anda gunakan dari CSS atau JavaScript. API ini mencoba menggunakan resource thread utama sesedikit mungkin, membuat 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 mulusnya animasi berbasis scroll dengan API baru.

CSS API animasi berbasis scroll versus JavaScript klasik

Contoh status progres berikut dibuat menggunakan teknik JavaScript class.

Dokumen merespons setiap kali peristiwa scroll terjadi untuk menghitung berapa banyak persentase scrollHeight yang 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 linimasa animasi yang baru, otomatis mengonversi posisi dalam rentang scroll menjadi persentase progres, sehingga melakukan semua bagian pekerjaan yang sulit.

Inilah bagian yang menarik—katakanlah Anda mengimplementasikan perhitungan yang sangat berat pada kedua versi {i>website<i} yang akan menghabiskan sebagian besar sumber daya 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 sudah Anda duga, versi JavaScript klasik menjadi tersendat 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 akan 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 mulus 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,
    }),
  }
);

Ini memungkinkan Anda membuat animasi status progres yang sama seperti yang ditampilkan di demo CSS sebelumnya hanya dengan menggunakan JavaScript. Teknologi yang mendasarinya sama dengan versi CSS. API mencoba menggunakan sesedikit mungkin resource thread utama, membuat animasi jauh lebih mulus 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 yang deklaratif.

Demo dan referensi lainnya

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

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