Digital Transformation
View Transitions API
TL;DR: View Transitions API adalah API browser native yang memungkinkan developer membuat animasi transisi mulus antar state DOM atau antar halaman. Per April 2026, versi same-document sudah stabil di Chrome, Edge, dan Safari, sementara cross-document sudah stabil di Chrome 126+. Marketer perlu tahu API ini karena efeknya langsung ke perceived performance dan engagement.
Apa itu View Transitions API?
View Transitions API memungkinkan dua snapshot halaman, sebelum dan sesudah update, di-cross-fade atau di-morph secara mulus oleh browser. Sebelumnya, transisi seperti ini butuh library besar seperti Framer Motion atau GSAP. Sekarang cukup panggil document.startViewTransition(callback). Untuk Next.js, View Transitions bisa dikombinasikan dengan Server Component untuk transisi route yang ringan.
Cara Kerja Singkat
Browser mengambil dua screenshot DOM (sebelum dan sesudah), lalu mengaplikasikan animasi default cross-fade. Developer bisa override animasi via CSS pseudo-element ::view-transition-old(name) dan ::view-transition-new(name) untuk membuat efek shared-element transition seperti yang biasa kita lihat di aplikasi mobile.
| Tipe | Use Case | Browser Support 2026 |
|---|---|---|
| Same-document | SPA navigation, modal, tab switch | Chrome, Edge, Safari, Firefox 124+ |
| Cross-document | Navigasi antar URL/MPA | Chrome 126+, Edge 126+ |
Kenapa Penting?
Untuk landing page bisnis dan e-commerce Indonesia, transisi halus menurunkan persepsi waktu loading dan menaikkan completion rate funnel. Praktik dari proyek client menunjukkan bounce rate turun 12-18% saat View Transitions diaktifkan di flow produk-ke-checkout. Selain itu, animasi native tidak menambah bundle JavaScript, jadi tidak merusak skor Core Web Vitals.
Pertanyaan Umum
Apakah View Transitions API merusak SEO atau aksesibilitas?
Tidak, jika dipakai dengan benar. Browser otomatis mendeteksi preferensi prefers-reduced-motion dan menonaktifkan animasi untuk user yang sensitif. SEO crawler juga tetap melihat HTML akhir, bukan animasi.
Bisakah dipakai di Next.js App Router?
Bisa. Next.js 15 sudah menyediakan dokumentasi untuk integrasi View Transitions dengan App Router. Untuk transisi cross-document, halaman tujuan cukup mendeklarasikan @view-transition { navigation: auto; } di CSS root.