Animasi yang didorong scroll adalah pola UX umum di web. Animasi berbasis scroll ditautkan ke posisi scroll dalam container 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 berbasis scroll menggunakan JavaScript untuk merespons peristiwa scroll di thread utama. Hal ini mempersulit pembuatan animasi berbasis scroll yang berperforma baik 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 sangat halus yang dijalankan 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.
Tokopedia
Tokopedia mengganti penerapan JavaScript kustom sebelumnya dengan animasi berbasis Scroll untuk mengoptimalkan performa halaman, dan untuk meningkatkan keseluruhan pengalaman penjelajahan di seluruh funnel konversi e-commerce.
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
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).
Kode (Ponsel)
Pada 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 pembelajaran 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.
Kode
Serupa dengan contoh sebelumnya dari Tokopedia, Policybazaar menggunakan
fungsi scroll()
untuk menetapkan linimasa progres scroll anonim untuk
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)
Policybazaar (Halaman Listingan Produk)
Tokopedia (Halaman Detail Produk)
Hal-hal yang perlu dipertimbangkan saat menggunakan Scroll-driven Animations API
Anda dapat mem-polyfill animasi berbasis scroll untuk browser yang tidak mendukung, misalnya dengan polyfill scroll linimasa. 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 di-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()
.