Transisi memiliki banyak manfaat bagi pengguna, termasuk membantu menjaga mereka dalam konteks dan mengurangi persepsi latensi. Developer menginginkan kemampuan untuk membuat transisi yang lancar di antara halaman, yang membantu meningkatkan engagement pengguna dengan situs mereka.
Namun, mengaktifkan transisi status sangat sulit karena mengharuskan developer mengelola status dari dua elemen yang berbeda. Bahkan sesuatu seperti cross-fade sederhana melibatkan kedua status yang ada secara bersamaan. Hal tersebut menimbulkan tantangan kegunaan, seperti menangani interaksi tambahan pada elemen keluar. Untuk pengguna perangkat asistif, ada periode ketika status sebelum dan sesudah berada di DOM secara bersamaan. Selain itu, objek dapat bergerak di sekitar pohon dengan cara yang bagus secara visual, tetapi dapat dengan mudah menyebabkan hilangnya posisi dan fokus membaca.
View Transitions API yang diluncurkan di Chrome 111 memungkinkan pembuatan transisi yang lancar dan sederhana antar-halaman. Hal ini memungkinkan Anda membuat perubahan DOM tanpa tumpang tindih antar-status, dan memiliki animasi transisi antarstatus menggunakan tampilan yang di-snapshot.
Anda mungkin bertanya-tanya, seberapa mudah penerapannya? Jenis kasus penggunaan apa yang ada? Bagaimana developer lain menggunakan transisi tampilan?
Artikel ini akan memandu Anda dalam menerapkan transisi tampilan di 4 situs: RedBus (perjalanan), CyberAgent (penerbit berita/blog), Nykaa (e-Commerce), dan PolicyBazaar (asuransi), serta bagaimana situs mereka mendapatkan manfaat dalam berbagai cara menggunakan View Transitions API.
redBus
redBus, bagian dari grup MakeMyTrip, adalah situs pemesanan dan tiket bus yang berkantor pusat di Bangalore, India dengan kehadiran di berbagai wilayah geografis di seluruh dunia. Ini adalah salah satu situs pertama yang menerapkan pengalaman menggunakan View Transitions API.
Mengapa Redbus menerapkan transisi tampilan?
Tim redBus sangat yakin dalam memberikan pengalaman web terpadu seperti aplikasi, yang sedekat mungkin dengan aplikasi asli mereka. Faktanya, mereka telah menerapkan beberapa solusi kustom selama bertahun-tahun. Misalnya, mereka meluncurkan animasi berbasis JavaScript dan CSS yang disesuaikan untuk transisi halaman bahkan sebelum View Transitions API dikembangkan. Namun, hal itu berarti mereka harus menangani pengelolaan performa di segmen jaringan dan perangkat yang lebih rendah, yang terkadang mengakibatkan pengalaman yang berbeda saat menggunakan strategi pemuatan adaptif.
redBus menggunakan transisi tampilan untuk beberapa perjalanan pengguna. Misalnya, di bagian bantuan mandiri dalam aplikasi seluler yang membuka halaman web di Tab Chrome Kustom, dan di funnel pemesanan tiket bus tempat pengguna beralih dari halaman listingan inventaris ke halaman pembayaran. Pada kasus terakhir, transisi tampilan membuat navigasi halaman ke halaman lebih lancar dan menghasilkan peningkatan rasio konversi. Hal ini adalah hasil dari pengalaman pengguna yang lebih baik dan performa yang dirasakan yang lebih baik saat operasi yang berat—seperti mengambil inventaris terbaru yang tersedia—dijalankan.
Detail teknis implementasi
redBus menggunakan React dan EJS sebagai tech stack frontend mereka, dengan kombinasi SPA dan MPA di berbagai perjalanan. Cuplikan kode berikut menunjukkan cara transisi tampilan digunakan:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
Dalam CSS berikut, slide-to-right, slide-to-left, slide-from-right, dan slide-from-left adalah keyframe animasi css.
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Dampak bisnis
redBus memilih untuk menerapkan transisi tampilan beserta upaya peningkatan INP di seluruh situsnya, sehingga menghasilkan peningkatan penjualan sebesar 7%. Amit Kumar, Senior Engineering Manager di redBus, mengatakan bahwa transisi tampilan sangat luar biasa bagi pengguna yang benar-benar menginginkan pengalaman pengguna yang lebih baik dan menginginkan overhead pemeliharaan yang lebih sedikit.
Kami telah mengadakan sesi masukan pengguna yang komprehensif, yang menggabungkan insight berharga dari beragam kelompok pengguna. Pemahaman kami yang mendalam tentang basis pengguna kami (bus dan kereta api) dan kebutuhan mereka, ditambah dengan keahlian kami, membuat kami yakin bahwa fitur ini akan memberikan manfaat yang signifikan sejak awal, tanpa perlu pengujian A/B. Transisi tampilan adalah langkah menjembatani kesenjangan antara aplikasi dan web dengan pengalaman navigasi yang lancar.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent adalah perusahaan IT yang berbasis di Jepang yang menyediakan banyak layanan online, termasuk blog dan penerbitan berita.
Mengapa CyberAgent menerapkan transisi tampilan?
CyberAgent telah mempertimbangkan untuk menggunakan animasi CSS atau menggunakan framework untuk menerapkan transisi animasi guna meningkatkan pengalaman pengguna, tetapi mereka khawatir dengan performa yang buruk dalam merender DOM dan kemudahan pemeliharaan kode. Saat Chrome menambahkan dukungan untuk API transisi Lihat, mereka bersemangat untuk menggunakannya untuk membuat transisi halaman yang menarik yang mengatasi tantangan ini.
CyberAgent menerapkan transisi tampilan antara daftar blog dan halaman blog. Di sini, perhatikan bagaimana mereka menambahkan transisi elemen ke {i>hero image<i}. Anda dapat mengunjungi situsnya dan merasakannya secara langsung sekarang.
Mereka juga menggunakan kueri media untuk mendesain pengalaman animasi yang berbeda untuk perangkat yang berbeda. Untuk halaman seluler, mereka menyertakan transisi elemen, tetapi efek ini memiliki terlalu banyak gerakan untuk desktop.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detail teknis implementasi
CyberAgent menggunakan Next.js untuk membuat SPA-nya. Contoh kode berikut menunjukkan cara menggunakan View Transition API.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Lihat beberapa contoh kode Next.js lainnya.
Melihat Transisi untuk MPA dengan teknologi pra-rendering
CyberAgent juga mencoba View Transitions API untuk Aplikasi Multi-Halaman (MPA) baru (saat ini dengan flag chrome://flags/#view-transition-on-navigation) di layanan bernama Ameba News, yang merupakan situs portal berita.
Transisi tampilan digunakan di dua tempat: Yang pertama adalah saat mengubah kategori berita, yang ditampilkan di video berikut.
Yang kedua adalah antara halaman sorotan berita, tempat kutipan konten ditampilkan, dan saat pengguna mengklik Lihat detail selengkapnya, bagian lain artikel akan memudar.
Menariknya adalah mereka hanya menambahkan animasi ke bagian yang akan berubah setelah tombol diklik. Perubahan kecil pada desain animasi ini membuat laman MPA tampak lebih seperti SPA dari sudut pandang pengguna, dengan hanya konten baru yang dianimasikan di:
Berikut cara mereka melakukannya: mereka menetapkan view-transition-name yang berbeda ke bagian halaman yang berbeda. Misalnya, mereka menetapkan satu view-transition-name ke bagian atas artikel, satu lagi untuk bagian bawah, dan tidak menambahkan animasi ke bagian atas.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Hal menarik lainnya tentang penggunaan API transisi tampilan oleh CyberAgent adalah mereka menggunakan quicklink untuk menerapkan aturan pra-rendering dengan mudah di halaman detail. Berikut adalah kode contohnya:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Anda dapat membaca informasi selengkapnya tentang penerapan quicklink di artikel ini.
Testimoni
Kazunari Hara, Tech Lead layanan Ameba di CyberAgent, mengatakan bahwa transisi tampilan dapat berdampak signifikan pada bisnis karena dua alasan.
Pertama, mereka memandu pengguna di halaman situs. Transisi tampilan memungkinkan pengguna secara visual fokus pada pesan yang paling penting, dan membantu mereka mengoptimalkan halaman web. Selain itu, tombol ini meningkatkan dan menekankan merek dengan animasi. CyberAgent memiliki desain animasi khusus untuk mengomunikasikan brand mereka. Dengan transisi tampilan, mereka dapat menerapkan pengalaman bermerek ini tanpa menambah biaya pemeliharaan library eksternal.
View Transitions adalah salah satu API favorit saya. Kemampuan untuk menambahkan animasi sebagai fitur browser standar membuat transisi tampilan lebih mudah diimplementasikan dan dikelola dibandingkan dengan solusi lain yang bergantung pada library. Kami berharap dapat menerapkan transisi tampilan ke lebih banyak layanan untuk menyampaikan brand kami.
Kazunari Hara, CTO Ameba
Nykaa
Nykaa adalah platform e-commerce fashion dan kecantikan terbesar di India. Mereka ingin membuat pengalaman web seluler sedekat mungkin dengan pengalaman aplikasi native. Ketika sebelumnya mencoba menerapkan animasi transisi, mereka mengalami kesulitan dalam menulis JavaScript kustom yang kompleks. Hal ini juga sedikit memengaruhi performa situs mereka.
Mengapa Nykaa menerapkan transisi tampilan?
Dengan dimulainya transisi tampilan, tim Nykaa melihat peluang di mana transisi ini tersedia secara native berarti UX transisi halaman dapat ditingkatkan secara signifikan tanpa biaya untuk performa. Nykaa sering menggunakan transisi tampilan untuk bertransisi dari halaman detail produk ke halaman listingan produk.
Detail teknis implementasi
Nykaa menggunakan React dan Emotion untuk membuat SPA-nya. Kode contoh lainnya tentang cara menggunakan Transisi Tampilan dengan React dapat ditemukan di sini.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS untuk animasi panel samping:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Testimoni
Sunit Jindal, kepala aplikasi di Nykaa, mengatakan bahwa manfaat terbesar dari transisi tampilan adalah "Persepsi kecepatan". Nykaa menggunakan efek kilau untuk menunggu konten dimuat dari backend, tetapi mendapati bahwa menampilkan efek kilau tidak memberi pengguna berapa lama mereka harus menunggu konten dimuat. Dengan transisi tampilan, transisi itu sendiri memberi pengguna perasaan bahwa "sesuatu akan terjadi", sehingga proses menunggu tidak terlalu menyakitkan.
Nykaa sangat antusias dengan peningkatan UX halaman web mereka yang baru dengan transisi tampilan, dan juga siap untuk menerapkan transisi tampilan di halaman lainnya. Inilah yang dikatakan VP of Design mereka:
Kami berkomitmen lembut untuk menerapkan transisi tampilan di semua fitur mendatang jika diperlukan. Beberapa area telah diidentifikasi dan tim secara aktif berinvestasi di area tersebut.
Krishna R V, VP of Design
PolicyBazaar
PolicyBazaar yang berkantor pusat di Gurgaon adalah perusahaan agregator asuransi dan perusahaan teknologi keuangan multinasional terbesar di India.
Mengapa PolicyBazaar menerapkan transisi tampilan?
Sebagai perusahaan yang mengutamakan web, tim PolicyBazaar selalu berupaya menyediakan pengalaman pengguna sebaik mungkin di sepanjang perjalanan penting pengguna mereka. Menerapkan transisi kustom menggunakan JavaScript dan CSS bahkan sebelum peluncuran View Transitions API merupakan hal yang umum dilakukan karena mereka dapat meningkatkan pengalaman pengguna, membuat alur navigasi yang lancar, dan meningkatkan daya tarik visual situs mereka secara keseluruhan.
Namun, penerapan kustom ini terkadang menyebabkan keterlambatan berbasis performa, kompleksitas pemeliharaan kode, dan kompatibilitas yang kurang optimal dengan framework yang digunakan. View Transitions API membantu mereka mengatasi sebagian besar tantangan ini dengan menyediakan antarmuka yang mudah digunakan, yang dilengkapi manfaat performa secara native.
PolicyBazaar menggunakan transisi tampilan di berbagai elemen dalam perjalanan pra-kutipan mereka untuk menarik perhatian calon pembeli dalam memberikan detail yang diperlukan untuk membeli polis asuransi.
Detail teknis implementasi
Mereka menggunakan pendekatan framework hybrid dengan Angular dan React yang mendominasi sebagian besar codebase mereka. Berikut adalah kutipan VT dari kode mereka yang ditulis dalam Angular dan dibagikan oleh Aman Soni (Lead Frontend Developer PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Testimoni
Rishabh Mehrotra, kepala Desain (Life BU), mengatakan bahwa transisi tampilan memainkan peran penting dalam meningkatkan pengalaman {i>website<i} bagi pengguna mereka dengan meningkatkan kegunaan, keterlibatan, dan kepuasan secara keseluruhan. Teknologi ini membantu menyediakan navigasi yang mulus, interaksi terpandu, mengurangi beban kognitif, estetika modern, dan banyak lagi.
Meningkatkan pengalaman web merupakan tujuan terpenting bagi PB, dan VT telah terbukti menjadi alat bantu dalam mencapai hal ini dengan kelancaran luar biasa. Daya tariknya yang luas di antara komunitas developer dan basis pengguna kami telah membangkitkan antusiasme tim kami. Selagi kami mempertimbangkan integrasinya di berbagai POD, kami mengantisipasi dampak positif yang luas terhadap tingkat kepuasan dan keunggulan operasional.
Saurabh Tiwari (CTO, PolicyBazaar)
Langkah berikutnya
Apakah Anda tertarik untuk mencoba transisi tampilan? Berikut adalah beberapa referensi yang dapat Anda tindak lanjuti untuk mempelajari lebih lanjut: