Studi kasus animasi berbasis scroll

Swetha Gopalakrishnan

Saurabh Rajpal

Animasi yang digerakkan scroll adalah pola UX umum di web. Animasi berbasis scroll dikaitkan dengan posisi scroll dalam container scroll. Artinya, saat Anda melakukan scroll ke atas atau ke bawah, animasi tertaut akan bergerak maju atau mundur sebagai respons langsung. Contohnya adalah efek seperti gambar latar paralaks atau indikator baca yang bergerak saat Anda men-scroll.

Developer biasanya membuat animasi yang digerakkan oleh scroll menggunakan JavaScript untuk merespons peristiwa scroll di thread utama. Hal ini menyulitkan pembuatan animasi berbasis scroll berperforma tinggi yang disinkronkan dengan scrolling, karena peristiwa scroll dikirimkan secara asinkron, dan sering kali menyebabkan jank karena berada di thread utama.

Namun, sebagai bagian dari fitur CSS dan UI baru yang tersedia di browser, Anda kini dapat membuat animasi berbasis scroll yang deklaratif. Dengan Scroll Timelines dan View Timelines, konsep baru yang terintegrasi dengan Web Animations API (WAAPI) dan CSS Animations API yang sudah ada, Anda kini dapat memiliki animasi yang digerakkan oleh scroll yang sangat lancar dan berjalan di luar thread utama, hanya dengan beberapa baris kode. Dalam studi kasus ini, temukan cara Tokopedia, redBus, dan Policybazaar telah memanfaatkan fitur baru ini.

Tokopedia

Tokopedia mengganti penerapan JavaScript kustom sebelumnya dengan animasi yang digerakkan oleh scroll untuk mengoptimalkan performa halaman dan meningkatkan kualitas pengalaman penjelajahan secara keseluruhan di seluruh funnel konversi e-commerce mereka.

Kami berhasil mengurangi hingga 80% baris kode dibandingkan dengan menggunakan peristiwa scroll JavaScript konvensional dan mengamati bahwa penggunaan CPU rata-rata berkurang dari 50% menjadi 2% saat men-scroll— Andy Wihalim, Senior Software Engineer, Tokopedia

Kode

Implementasi berikut menggunakan fungsi scroll() untuk menetapkan linimasa progres scroll anonim guna mengontrol progres animasi CSS. Visibilitas panel tetap atas berubah berdasarkan posisi scroll dalam animationRange yang ditentukan.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus memiliki animasi yang berbeda untuk seluler dan desktop di halaman landing things-to-do, yang ditampilkan di awal funnel konversi kepada semua pengguna. Dengan animasi berbasis scroll, mereka dapat mengganti penerapan JavaScript kustom ini dengan CSS untuk mencapai efek yang sama.

Kasus penggunaan

Galeri Foto dengan Pengungkapan Gambar (untuk seluler) dan Cover Flow (untuk Desktop).

Kode (Seluler)

Dalam contoh sebelumnya, Tokopedia menggunakan linimasa progres scroll anonim. Dalam kode berikut, redBus menggunakan linimasa progres tampilan bernama. Animasi mengubah opacity dan clip-path elemen <img> dalam animation-range yang ditentukan di dalam scroller induk terdekat elemen, yang dalam hal ini adalah scroller galeri foto.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

Kami sangat senang melihat fitur ini karena merupakan perpaduan sempurna antara performa dan pengalaman yang lebih baik, sehingga meningkatkan sinyal Pengalaman Halaman kami untuk SEO. Selain itu, kurva pembelajaran yang minimal menjadikannya harus dimiliki oleh setiap situs e-commerce. Kami juga mendapatkan masukan dan dukungan positif dari tim lain untuk memanfaatkan SDA dalam perjalanan pengguna lainnya.— Amit Kumar, Senior Engineering Manager, redBus.

Policybazaar

Membandingkan paket asuransi adalah tindakan utama berulang yang dilakukan pengguna untuk memandu proses pengambilan keputusan mereka. Dengan menggunakan animasi yang digerakkan oleh scroll, Policybazaar memperkecil ukuran elemen berprioritas rendah sebagai respons terhadap pengguna yang men-scroll tabel. Hal ini menghasilkan pengalaman men-scroll yang lancar sekaligus meningkatkan keterbacaan.

Dengan animasi yang digerakkan scroll, kami dapat memaksimalkan ruang area tampilan agar pengguna dapat membandingkan paket, sehingga memastikan pengalaman membaca yang fokus dan tidak berantakan.—Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar.

Kode

Mirip dengan contoh sebelumnya dari Tokopedia, Policybazaar menggunakan fungsi scroll() untuk menyetel linimasa progres scroll anonim untuk mengontrol progres animasi CSS. Dalam hal ini, memperkecil ukuran font dan memudarkan header berdasarkan posisi scroll dalam animation-range yang ditentukan.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

Animasi yang digerakkan scroll sebagai pola umum di seluruh perjalanan pengguna

Semua perusahaan e-commerce unggulan menggunakan Animasi yang digerakkan scroll di halaman dengan kartu, yang menganimasikan kartu untuk menarik perhatian pengguna . Contoh berikut menunjukkan efek scroll pada kartu di berbagai bagian perjalanan pengguna. Hal ini biasanya dicapai menggunakan linimasa progres tampilan anonim untuk mengontrol progres animasi CSS kustom, seperti yang ditunjukkan dalam cuplikan CSS berikut.

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (Halaman beranda)

Policybazaar (Halaman Listingan Produk)

Tokopedia (Halaman Detail Produk)

Hal-hal yang perlu dipertimbangkan saat menggunakan Scroll-driven Animations API

Anda dapat melakukan polyfill animasi berbasis scroll untuk browser yang tidak mendukungnya, misalnya dengan polyfill Scroll-timeline. Jika Anda melakukannya, hal ini akan memerlukan pengujian tambahan untuk memastikan bahwa polyfill berfungsi dengan baik bersama framework Anda, dan browser yang menggunakan polyfill tidak mengalami kegagalan animasi atau pengalaman yang tidak lancar.

Dari CSS, Anda dapat menggunakan @supports untuk menguji dukungan animation-timeline sebelum menggunakan animasi berbasis scroll. Contoh:

@supports (animation-timeline: scroll()) {

}

Resource

• Demo animasi yang digerakkan scroll
• Menganimasikan elemen saat men-scroll dengan Animasi berbasis scroll
• Codelab: Memulai animasi berbasis scroll dalam CSS
• Ekstensi Chrome: Debugger animasi yang digerakkan scroll
• Polyfill Scroll-timeline
• Ingin melaporkan bug atau fitur baru? Kami ingin mendengar pendapat Anda.

Baca artikel lain dalam seri ini yang membahas manfaat penggunaan fitur CSS dan UI baru seperti Transisi Tampilan, Popover, Kueri Penampung, dan pemilih has() bagi perusahaan e-commerce.

• Mengapa Kemampuan UI Web penting untuk situs e-commerce Anda?
• Lihat studi kasus Transisi
• Studi kasus Popover API
• Studi kasus Kueri Penampung
• Studi kasus pemilih:has()