Studi kasus tentang performa animasi berbasis scroll

Yuriko Hirota

Apa yang baru dengan animasi berbasis scroll?

Animasi yang didorong scroll adalah cara untuk menambahkan interaktivitas dan minat visual ke situs atau aplikasi web Anda, yang dipicu oleh posisi scroll pengguna. Hal ini dapat menjadi cara yang bagus untuk membuat pengguna tetap berinteraksi dan membuat situs Anda lebih menarik secara visual.

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

• Scroll dilakukan di thread terpisah sehingga mengirimkan peristiwa scroll secara asinkron.
• Animasi thread utama bergantung pada jank.

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

Kini kami memperkenalkan kumpulan API baru untuk mendukung animasi berbasis scroll, yang dapat 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:

Dukungan Browser

• 115
• 115
• 
• x

Sumber

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

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

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 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 penghitungan yang sangat berat di 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 stabil 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 sangat berbeda di DevTools, seperti ditunjukkan dalam screenshot berikut.

Demo berikut menampilkan penerapan animasi berbasis scroll yang dibuat oleh CyberAgent. Anda dapat melihat bahwa foto akan memudar saat Anda men-scroll.

JavaScript API animasi baru yang didorong scroll versus JavaScript klasik

Manfaat API baru tidak hanya terbatas pada CSS. Anda juga dapat membuat animasi berbasis scroll halus dan halus 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 cara ini, Anda dapat membuat animasi status progres yang sama seperti yang ditunjukkan di demo CSS sebelumnya hanya dengan menggunakan JavaScript. Teknologi yang mendasarinya sama dengan versi CSS. API ini mencoba menggunakan resource thread utama sesedikit mungkin, membuat animasi jauh lebih halus jika dibandingkan dengan pendekatan JavaScript klasik.

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

Demo dan referensi lainnya

Anda dapat melihat berbagai implementasi animasi yang didorong 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 berbasis scroll yang baru, baca artikel ini dan pembicaraan I/O 2023.