Pernahkah Anda memperhatikan betapa halamnya pengalaman berpindah antar halaman website? Navigasi tradisional berbasis dokumen membuat browser memuat ulang seluruh halaman, sehingga mata pengguna disuguhkan layar kosong sepersekian detik sebelum konten baru muncul. Aplikasi native di ponsel tidak mengalami ini karena semua transisi dikelola di dalam satu proses. Kini, dengan View Transitions API, website biasa pun bisa mendapatkan animasi perpindahan halaman yang mulus ala aplikasi native — tanpa harus berubah total menjadi SPA atau menambah library JavaScript berat.
Apa Itu View Transitions API?
View Transitions API adalah fitur browser yang memungkinkan pengembang menganimasikan perpindahan dari satu tampilan ke tampilan lain secara eksplisit. Fitur ini bekerja pada dua skenario. Pertama, same-document view transitions, yaitu transisi antara dua state di halaman yang sama, misalnya saat pengguna mengeklik thumbnail galeri dan gambar besar muncul dengan efek zoom halus. Kedua, cross-document view transitions, yaitu transisi antar halaman dokumen berbeda — inilah bagian yang paling ditunggu karena memecahkan masalah navigasi MPA (multi-page application) klasik.
Secara konsep, API ini mirip dengan CSS Transitions dan Animations, tetapi menganimasikan elemen lama dan baru sekaligus. Perbedaannya, pada view transition browser secara otomatis membuat snapshot tampilan lama, merender tampilan baru, lalu menganimasikan keduanya bertumpuk. Anda cukup memberi tahu elemen mana yang berubah, sementara browser mengurus detail tekniknya.
Mengapa Tidak Menggunakan Library Saja?
Sebelum API ini ada, developer biasanya memakai library seperti Swup, Barba, atau Turbolinks untuk mendapatkan transisi halus. Masalahnya, solusi semacam itu bekerja dengan cara mengintersep navigasi, memuat konten baru lewat fetch, lalu mengganti DOM secara manual. Hasilnya memang mulus, tapi harganya mahal: JavaScript tambahan puluhan kilobyte, potensi konflik dengan manajemen state, dan kompleksitas debugging yang naik drastis saat aplikasi semakin besar.
View Transitions API mengambil jalan yang berbeda dan jauh lebih ringan. Karena ditangani langsung oleh mesin rendering browser, tidak ada XMLHTTPRequest tambahan, tidak ada penggantian DOM manual, dan tidak ada kerangka kerja baru yang harus dipelajari. Halaman tetap dimuat dari server seperti biasa — persis pola MPA yang sudah terbukti andal, SEO-friendly, dan mudah dirawat. Animasinya menjadi lapisan kosmetik yang bisa dinyalakan atau dimatikan kapan saja.
Cara Kerja di Baliknya
Pada same-document, cukup panggil fungsi document.startViewTransition() di dalam JavaScript. Fungsi ini menerima callback yang mengubah DOM; browser otomatis merekam perubahannya dan menjalankan animasi default berupa cross-fade. Untuk cross-document, yang perlu Anda lakukan lebih sederhana lagi: tambahkan satu properti CSS view-transition-name pada elemen yang ingin dianimasikan, lalu browser akan mencocokkan elemen dengan nama yang sama di halaman berikutnya dan menganimasikan perbedaannya secara otomatis — meskipun halaman dimuat dari server.
Setiap elemen yang diberi view-transition-name akan dipindahkan ke lapisan pseudo-element baru bernama ::view-transition. Di dalamnya ada ::view-transition-old untuk tangkapan layar sebelumnya dan ::view-transition-new untuk tangkapan layar baru. Dari situ Anda bebas memakai keyframes CSS untuk mengatur durasi, easing, dan gaya animasinya, misalnya membuat kartu membesar, teks bergeser, atau gambar meluncur masuk. Perlu diingat bahwa nama view transition harus unik dalam satu halaman, dan sebaiknya diberikan hanya pada elemen yang benar-benar berubah agar animasi tidak boros sumber daya.
Contoh Implementasi Sederhana
Berikut contoh minimal untuk kasus same-document, misalnya transisi saat mengganti gambar utama di halaman produk:
button.addEventListener("click", () => {
document.startViewTransition(() => {
image.src = gambarBaru;
judul.textContent = namaBaru;
});
});Sedangkan untuk cross-document, Anda cukup menandai elemen header yang sama di kedua halaman dengan nama yang identik:
.hero-image {
view-transition-name: hero;
}Dengan satu baris CSS itu saja, perpindahan antar halaman yang tadinya keras menjadi animasi yang halus. Durasi default biasanya sekitar 250 milidetik, dan Anda bisa mengubahnya lewat properti animation-duration pada pseudo-element yang tersedia. Jika ingin efek yang lebih ekspresif, gunakan keyframes khusus seperti efek zoom-in atau slide-up untuk pseudo-element new, dan zoom-out untuk pseudo-element old.
Kasus Penggunaan yang Paling Tepat
- E-commerce: gambar produk yang membesar saat pengguna mengeklik thumbnail, membuat pengalaman belanja terasa seperti aplikasi mobile.
- Galeri foto dan portofolio: animasi zoom yang mulus menjaga konteks visual pengguna saat berpindah dari grid ke tampilan detail.
- Dashboard dan panel data: kartu atau tabel yang berubah isi tanpa “loncatan” visual yang mengganggu.
- Website berita atau blog: transisi lembut antar artikel membantu pembaca tetap merasa berada di tempat yang sama.
Dukungan Browser dan Strategi Fallback
View Transitions API didukung di Chrome dan Edge sejak versi 111 untuk same-document, dan sejak Chrome 125 untuk cross-document. Safari mulai mendukung di iOS 18 dan macOS Sonoma, sementara Firefox masih terus menyempurnakan implementasinya. Karena dukungannya belum seratus persen, pola terbaik adalah progressive enhancement: gunakan CSS @supports (view-transition-name: none) sebagai penjaga, sehingga browser yang belum mendukung tetap menampilkan navigasi normal tanpa animasi. Jangan pernah membuat fitur inti website bergantung pada view transition; anggap animasi sebagai hiasan yang mempercantik, bukan fondasi.
Selain itu, perhatikan aksesibilitas. Pengguna yang mengaktifkan preferensi reduce motion di sistem operasinya berhak mendapatkan animasi minimal. Tambahkan media query @media (prefers-reduced-motion: reduce) untuk menonaktifkan atau memperpendek animasi, sehingga pengalaman tetap nyaman bagi semua kalangan. Terakhir, uji animasi pada perangkat kelas menengah ke bawah; animasi yang halus di laptop mahal bisa terasa patah-patah di ponsel lama, jadi selalu ukur dampaknya terhadap metrik performa web.
Kesimpulan
View Transitions API membuktikan bahwa web modern semakin mengejar kualitas pengalaman aplikasi native. Yang paling menarik, peningkatan ini diraih tanpa kerangka kerja rumit: cukup sebaris JavaScript dan beberapa aturan CSS. Bagi developer, ini peluang emas untuk menaikkan persepsi kualitas website dengan biaya pengembangan yang sangat kecil. Mulailah dengan menandai satu elemen hero, rasakan hasilnya, lalu bereksperimen dengan keyframes. Di era ketika perhatian pengguna sangat pendek, transisi yang halus bisa menjadi pembeda nyata antara website yang terasa murah dan website yang terasa premium.
