Halaman ini diterjemahkan oleh Cloud Translation API.

Studi kasus animasi berbasis scroll

Swetha Gopalakrishnan

Saurabh Rajpal

Animasi yang didorong scroll adalah pola UX umum di web. Animasi berbasis scroll dikaitkan dengan posisi scroll dalam penampung scroll. Artinya, saat Anda men-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 pembacaan yang bergerak saat Anda men-scroll.

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

Namun, sebagai bagian dari fitur CSS dan UI baru yang diluncurkan 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 ada, Anda kini dapat memiliki animasi yang berjalan dengan lancar dan didorong scroll dari thread utama, hanya dengan beberapa baris kode. Dalam studi kasus ini, temukan bagaimana Tokopedia, redBus, dan Policybazaar telah mendapatkan manfaat dari fitur baru ini.

Dukungan Browser

Sumber

Tokopedia

Tokopedia mengganti penerapan JavaScript kustom sebelumnya dengan animasi yang didorong scroll untuk mengoptimalkan performa halaman, dan meningkatkan pengalaman penjelajahan secara keseluruhan di 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 turun dari 50% menjadi 2% saat men-scroll— Andy Wihalim, Software Engineer Senior, Tokopedia

Animasi yang mengubah visibilitas panel melekat atas berdasarkan posisi scroll pengguna.

Kode

Implementasi berikut menggunakan fungsi scroll() untuk menetapkan linimasa progres scroll anonim guna mengontrol progres animasi CSS. Visibilitas panel melekat 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 kepada semua pengguna. Dengan animasi berbasis scroll, mereka dapat mengganti implementasi JavaScript kustom ini dengan CSS untuk mendapatkan efek yang sama.

Kasus penggunaan

Galeri Foto dengan Image Reveal (untuk perangkat seluler) dan Cover Flow (untuk Desktop).

Efek tampilan gambar animasi yang didorong scroll untuk memuat gambar di galeri foto "Rekomendasi Aktivitas" redBus.

Kode (Ponsel)

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 ancestor 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 dengan pengalaman yang lebih baik, sehingga meningkatkan sinyal Pengalaman Halaman kami untuk SEO. Selain itu, kurva belajar yang minimal menjadikannya wajib dimiliki untuk setiap situs e-commerce. Kami juga mendapatkan masukan dan dukungan positif dari tim lain untuk memanfaatkan SDA untuk lebih banyak perjalanan pengguna.— 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 didorong scroll, Policybazaar memperkecil ukuran elemen prioritas rendah sebagai respons terhadap pengguna yang men-scroll tabel. Hal ini menghasilkan pengalaman scroll yang halus sekaligus meningkatkan keterbacaan.

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

Animasi yang didorong scroll animate-timeline pada tabel perbandingan paket di LOB (Bidang Usaha) Investasi dan Asuransi Jiwa.

Kode

Serupa dengan contoh sebelumnya dari Tokopedia, Policybazaar menggunakan fungsi scroll() untuk menetapkan linimasa progres scroll anonim guna mengontrol progres animasi CSS. Dalam hal ini, mengecilkan 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 didorong scroll sebagai pola umum di seluruh perjalanan pengguna

Semua perusahaan e-commerce unggulan menggunakan animasi yang didorong 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)

Efek fly-in animasi yang didorong scroll untuk memuat kartu produk di halaman landing "Rekomendasi Aktivitas" redBus.

Policybazaar (Halaman Listingan Produk)

Animasi yang didorong scroll, memudar, dan menghilangnya kartu produk di LOB (Bidang Usaha) Investasi dan Kehidupan.

Tokopedia (Halaman Detail Produk)

Animasi memudar, menjadi jelas saat men-scroll produk yang tercantum.

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

Anda dapat melakukan polyfill animasi berbasis scroll untuk browser yang tidak mendukung, 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 bahwa browser yang menggunakan polyfill tidak mengalami kegagalan animasi atau pengalaman yang tidak lancar.

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

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

}

Resource

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

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