Halaman ini diterjemahkan oleh Cloud Translation API.

Studi kasus animasi berbasis scroll

Swetha Gopalakrishnan

Saurabh Rajpal

Animasi berbasis scroll adalah pola UX yang umum di web. Berbasis scroll animasi terhubung dengan posisi scroll container scroll. Artinya bahwa saat Anda men-scroll ke atas atau ke bawah, animasi yang ditautkan akan bergerak maju atau mundur dalam respons langsung. Contohnya adalah efek seperti latar belakang paralaks gambar atau indikator bacaan yang bergerak saat Anda men-scroll.

Pengembang biasanya membuat animasi berbasis {i>scroll<i} dengan menggunakan JavaScript untuk merespons peristiwa scroll di thread utama. Hal ini mempersulit proses pembuatan animasi berbasis scroll berperforma tinggi yang tersinkron dengan scroll, karena peristiwa scroll dikirimkan secara asinkron, dan sering menyebabkan jank karena berada di thread utama.

Namun, sebagai bagian dari Fitur CSS dan UI yang terbuka di browser, Anda bisa sekarang membuat animasi berbasis scroll yang deklaratif. Dengan Linimasa dan Tampilan Scroll Linimasa, konsep baru yang terintegrasi dengan yang ada Web Animations API (WAAPI) dan CSS Animations API, sekarang Anda bisa menikmati animasi berbasis scroll yang berjalan dari thread utama, hanya dengan beberapa baris pada kode sumber. Dalam studi kasus ini, temukan bagaimana Tokopedia, redBus, dan Policybazaar yang sudah mendapatkan manfaat dari fitur baru ini.

Dukungan Browser

Sumber

Tokopedia

Tokopedia mengganti implementasi JavaScript kustom sebelumnya dengan Animasi berbasis scroll untuk mengoptimalkan performa halaman dan meningkatkan kualitasnya pengalaman penjelajahan secara keseluruhan di seluruh funnel konversi e-commerce mereka.

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

Animasi perubahan visibilitas panel melekat atas berdasarkan scroll pengguna posisi Anda.

Kode

Implementasi berikut menggunakan fungsi scroll() untuk menyetel scroll anonim linimasa progres untuk mengontrol progres animasi CSS. Tujuan visibilitas bilah lekat 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 pada halaman landing rekomendasi aktivitas yang ditampilkan di awal funnel konversi kepada semua pengguna. Dengan animasi berbasis scroll, mampu mengganti penerapan JavaScript khusus ini dengan CSS untuk mencapai efek yang sama.

Kasus penggunaan

Galeri Foto dengan Pengungkapan Gambar (untuk seluler) dan Alur Penutup (untuk {i>Desktop<i}).

Gambar animasi berbasis scroll menampilkan efek untuk memuat gambar di "Rekomendasi Aktivitas" redBus galeri foto.

Kode (Ponsel)

Pada contoh sebelumnya, Tokopedia menggunakan progres scroll anonim linimasa kami. Dalam kode berikut, redBus menggunakan progres tampilan bernama linimasa kami. Animasi mengubah opacity dan clip-path dari <img> dalam animation-range yang didefinisikan di dalam elemen terdekat ancestor scroller, yang merupakan scroller galeri foto dalam kasus ini.

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, serta meningkatkan sinyal Pengalaman Halaman kami untuk SEO. Selain bahwa, kurva pembelajaran minimal menjadikannya wajib dimiliki setiap e-commerce situs Anda. Kami juga mendapat masukan positif dan dukungan dari tim lain untuk memanfaatkan SDA untuk lebih banyak perjalanan pengguna.— Amit Kumar, Senior Engineering Manajer, redBus.

Bazar Kebijakan

Membandingkan paket asuransi adalah tindakan utama berulang yang dilakukan oleh pengguna untuk memandu mereka proses pengambilan keputusan. Dengan menggunakan animasi berbasis scroll, Policybazaar mengecilkan ukuran elemen prioritas rendah sebagai respons terhadap pengguna yang menggulir tabel. Ini menghasilkan pengalaman scroll yang lancar sekaligus meningkatkan keterbacaan.

Dengan animasi berbasis scroll, kami bisa memaksimalkan ruang area pandang untuk pengguna untuk membandingkan paket, memastikan bacaan yang fokus dan rapi pengalaman yang sama.—Rishabh Mehrotra, Kepala Desain untuk BU Asuransi Jiwa, PolicyBazaar.

Animasi berbasis scroll animate-timeline pada tabel perbandingan rencana di Investment dan Life LOB (Jalur Bisnis).

Kode

Mirip dengan contoh sebelumnya dari Tokopedia, Policybazaar menggunakan Fungsi scroll() untuk menyetel timeline progres scroll anonim untuk mengontrol perkembangan animasi CSS. Dalam hal ini, mengecilkan {i>font<i} dan memudarkan header berdasarkan posisi scroll dalam animation-range.

@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, menganimasikan kartu untuk menarik perhatian pengguna . Tujuan contoh berikut menunjukkan efek scroll pada kartu di berbagai bagian pengguna perjalanan Anda. Batas ini biasanya dicapai menggunakan rentang waktu progres tampilan anonim untuk mengontrol progres animasi CSS kustom, seperti yang ditampilkan dalam berikut cuplikan CSS.

@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 berbasis scroll untuk memuat kartu produk di "Things To Do" redBus halaman landing Anda.

Policybazaar (Halaman Listingan Produk)

fade-in, fade-out animasi berbasis scroll pada kartu produk di Investment dan Life LOB (lini Bisnis).

Tokopedia (Halaman Detail Produk)

Animasi pudar dan pudar saat men-scroll produk terdaftar.

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

Dimungkinkan untuk mem-polyfill animasi berbasis scroll untuk browser yang tidak mendukung, misalnya dengan polyfill linimasa scroll. Jika Anda melakukannya, ini akan memerlukan pengujian tambahan untuk memastikannya berfungsi dengan baik dengan framework, dan browser yang menggunakan polyfill tidak mengalami animasi kegagalan 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 men-scroll dengan animasi berbasis Scroll
Codelab: Memulai animasi berbasis scroll dalam CSS
Ekstensi Chrome: Debugger animasi berbasis scroll
Polyfill linimasa scroll
Ingin melaporkan bug atau fitur baru? Kami ingin mendengar pendapat Anda!

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