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 tunduk 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, sehingga animasi yang didorong scroll jauh lebih mudah diterapkan, dan juga jauh lebih lancar. API animasi yang didorong 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 yang didorong 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 menampilkan 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 lambat dan macet 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 di DevTools benar-benar berbeda, seperti yang ditunjukkan pada screenshot berikut.

Demo berikut menunjukkan aplikasi animasi yang didorong scroll yang dibuat oleh CyberAgent. Anda dapat melihat bahwa foto 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 yang 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,
    }),
  }
);

Hal ini memungkinkan Anda membuat animasi status progres yang sama seperti yang ditampilkan dalam demo CSS sebelumnya hanya menggunakan JavaScript. Teknologi dasarnya sama dengan versi CSS. API 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 deklaratif yang didorong scroll.

Referensi dan demo 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 baru yang didorong scroll, lihat artikel ini dan presentasi I/O 2023.