Digital Transformation
View Transitions API (Transisi Tampilan Halaman)
TL;DR: View Transitions API adalah standar browser baru yang memungkinkan satu halaman berpindah ke halaman lain dengan animasi morph otomatis, mirip aplikasi mobile native. Sejak 2024 didukung Chrome dan Edge untuk Same-Document, dan sejak 2025 mulai stabil untuk Cross-Document. Untuk website bisnis, ini cara mendapatkan UX premium tanpa membuat Single Page Application yang membebani SEO.
Apa itu View Transitions API?
View Transitions API adalah antarmuka pemrograman web yang menangani snapshot halaman lama, lalu menjalankan animasi CSS sebelum menampilkan halaman baru. Browser menangani sebagian besar pekerjaan berat, sehingga developer cukup mendeklarasikan elemen mana yang harus berlanjut dengan atribut view-transition-name. Hasilnya adalah perpindahan halaman yang tampak seperti aplikasi native, tetapi tetap memakai arsitektur Multi-Page Application yang ramah SEO.
Dokumentasi resmi tersedia di Chrome for Developers View Transitions. Sejak Chrome 126 (Juni 2024), versi Cross-Document mulai bisa dipakai di production.
Cara Kerja Singkat
| Tahap | Yang Terjadi |
|---|---|
| 1. Trigger | Klik link atau pemanggilan document.startViewTransition() |
| 2. Snapshot | Browser memotret state DOM lama |
| 3. Render | Halaman baru dimuat di belakang layar |
| 4. Animate | Animasi CSS dijalankan otomatis antara state lama dan baru |
Untuk Cross-Document (antar halaman penuh), aktif via meta tag <meta name="view-transition" content="same-origin"> atau header Document-Policy.
Kenapa Penting?
Untuk website bisnis Indonesia, View Transitions menyelesaikan dilema klasik. Sebelumnya, agar perpindahan halaman terasa halus, banyak studio memilih jalur SPA dengan framework client-side berat, yang sering merusak Largest Contentful Paint dan indexing di Google. View Transitions memberi sensasi serupa di atas arsitektur MPA standar, sehingga bobot halaman tetap ringan dan struktur URL tetap bersih untuk SEO.
Praktis, fitur ini paling berpengaruh di halaman daftar produk ke detail produk, halaman portofolio ke studi kasus, dan navigasi gambar besar di galeri.
Pertanyaan Umum
Apakah View Transitions merusak SEO?
Tidak. URL setiap halaman tetap unik dan bisa di-crawl Google secara terpisah. Animasi hanya berjalan saat pengguna mengklik link, bukan saat bot mengindeks.
Apakah semua browser sudah mendukung?
Per April 2026, Chrome dan Edge mendukung penuh. Firefox dan Safari masih dalam pengembangan untuk Cross-Document. Pendekatan progressive enhancement aman: browser tanpa dukungan akan menampilkan transisi normal tanpa animasi.
Istilah Terkait