Studi kasus animasi berbasis scroll

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

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

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

Tokopedia

Tokopedia mengganti penerapan JavaScript kustom mereka sebelumnya dengan animasi berbasis Scroll untuk mengoptimalkan performa halaman, dan untuk meningkatkan pengalaman penjelajahan secara keseluruhan di seluruh funnel konversi e-commerce.

Kami berhasil mengurangi hingga 80% baris kode kami 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

Code

Implementasi berikut menggunakan fungsi scroll() untuk menetapkan linimasa progres scroll anonim guna mengontrol progres animasi CSS. Visibilitas sticky bar 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 perangkat seluler dan desktop di halaman landing rekomendasi aktivitas, yang ditampilkan di awal funnel konversi untuk semua pengguna. Dengan animasi berbasis scroll, mereka dapat mengganti implementasi JavaScript kustom ini dengan CSS untuk mencapai efek yang sama.

Kasus penggunaan

Galeri Foto dengan Tampilan Gambar (untuk seluler) dan Alur Penutup (untuk Desktop).

Kode (Seluler)

Pada contoh sebelumnya, Tokopedia menggunakan linimasa progres scroll anonim. Dalam kode berikut, redBus menggunakan linimasa progres tampilan yang diberi nama. Animasi mengubah opacity dan clip-path elemen <img> dalam animation-range yang ditentukan di dalam scroller ancestor terdekat yang dalam hal ini merupakan 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 ini adalah perpaduan sempurna antara performa dengan pengalaman yang lebih baik, sehingga meningkatkan sinyal Pengalaman Halaman 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 ke lebih banyak perjalanan pengguna.— Amit Kumar, Senior Engineering Manager, redBus.

Pasar Kebijakan

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

Dengan animasi berbasis scroll, kami dapat memaksimalkan ruang area pandang bagi pengguna untuk membandingkan paket, sehingga memastikan pengalaman membaca yang terfokus dan bebas kekacauan.—Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar.

Code

Serupa dengan contoh sebelumnya dari Tokopedia, Policybazaar menggunakan fungsi scroll() untuk menetapkan 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 berbasis scroll sebagai pola umum di sepanjang perjalanan pengguna

Semua perusahaan e-commerce unggulan menggunakan animasi berbasis Scroll pada 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 dengan 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 Animations API berbasis Scroll

Animasi berbasis scroll polyfill dapat digunakan untuk browser yang tidak mendukung, misalnya dengan polyfill linimasa scroll. Jika Anda melakukannya, hal ini memerlukan pengujian tambahan untuk memastikannya berfungsi dengan baik bersama framework Anda, dan bahwa browser yang menggunakan polyfill tidak mengalami kegagalan animasi atau pengalaman jank.

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

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

}

Resource

• Demo animasi berbasis scroll
• Menganimasikan elemen saat scroll dengan animasi berbasis Scroll
• Codelab: Mulai menggunakan animasi berbasis scroll dalam CSS
• Ekstensi Chrome: Debugger animasi berbasis scroll
• Polyfill linimasa scroll
• Apakah Anda ingin melaporkan bug atau fitur baru? Kami ingin mendengar pendapat Anda!

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

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