Digital Transformation
View Transition (Transisi Antarhalaman)
TL;DR: View Transition API adalah fitur browser modern yang memungkinkan animasi halus antar state atau navigasi halaman, mirip pengalaman aplikasi native. Sejak Chrome 111 (2023) dan dukungan cross-document yang melebar di 2024-2025, framework seperti Next.js dan Astro menjadikannya jalan praktis menaikkan persepsi kecepatan tanpa SPA penuh.
Apa itu View Transition?
View Transition adalah API yang memberi browser instruksi: ambil snapshot tampilan lama, render tampilan baru, lalu animasikan transisi keduanya. Sebelum API ini ada, animasi antarhalaman hanya mungkin di Single Page Application yang mengelola routing sendiri. Sekarang, transisi mulus bisa terjadi pada navigasi standar antarhalaman, bahkan untuk situs yang dibangun dengan SSR atau SSG.
Mekanismenya sederhana di permukaan: bungkus perubahan DOM dalam document.startViewTransition(), lalu atur animasi via CSS pseudo-elements seperti ::view-transition-old(root) dan ::view-transition-new(root). Untuk transisi antar dokumen yang sama-sama memakai API ini, browser menangani snapshot otomatis. Ini sejalan dengan tren soft navigation yang lebih ramah Core Web Vitals dibanding hard reload.
Same-Document vs Cross-Document
| Tipe | Kapan Dipakai | Dukungan Browser |
|---|---|---|
| Same-document | SPA atau update bagian halaman | Chrome 111+, Safari 18+ |
| Cross-document | Navigasi antar URL | Chrome 126+, support meluas 2025 |
Kenapa Penting?
Bagi pemilik website bisnis Indonesia yang ingin terasa premium tanpa investasi besar, View Transition adalah upgrade UX yang murah. Saat tim saya menambahkan transition pada kartu produk Nalesha (parfum), persepsi kecepatan navigasi naik signifikan padahal waktu loading sebenarnya tetap. Ini penting karena persepsi sering lebih menentukan konversi daripada angka mentah loading. Untuk situs yang sudah pakai Islands Architecture atau prefetch, View Transition jadi penyempurna.
Pertanyaan Umum
Apakah View Transition merusak SEO?
Tidak, asal navigasi tetap memakai URL nyata (bukan hash). Browser dan crawler memperlakukan transisi hanya sebagai animasi visual.
Apa fallback untuk browser lama?
Browser yang tidak mendukung akan melakukan navigasi normal tanpa animasi. Tidak ada break, hanya pengalaman yang sedikit kurang halus.