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.
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
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}).
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.
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)
Policybazaar (Halaman Listingan Produk)
Tokopedia (Halaman Detail Produk)
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()
.