Digital Transformation
View Transition API
View Transition API adalah Web API browser yang memungkinkan transisi animasi mulus antar state halaman atau antar dokumen tanpa library JavaScript tambahan, native sejak Chrome 111.
TL;DR: View Transition API memungkinkan transisi animasi antar state DOM atau antar halaman dengan satu pemanggilan
document.startViewTransition(). Native di Chrome 111+ dan Safari 18, mengurangi beban JavaScript untuk efek visual yang sebelumnya butuh library berat.
Apa itu View Transition API?
View Transition API adalah standar Web Platform untuk membuat transisi visual yang halus saat DOM berubah atau saat user berpindah halaman. Sebelumnya, efek seperti shared element transition di mobile app butuh library seperti Framer Motion atau GSAP. Kini browser mengurus snapshot, interpolasi, dan rendering otomatis.
API ini mendukung dua mode utama. Same-document transition untuk perubahan state dalam satu halaman, dan cross-document transition untuk perpindahan antar URL via soft navigation atau Multi-Page App.
Cara Kerja Singkat
Browser mengambil snapshot tampilan lama, menjalankan callback yang mengubah DOM, lalu menginterpolasi dari snapshot lama ke tampilan baru menggunakan CSS pseudo-element ::view-transition.
| Komponen | Fungsi |
|---|---|
document.startViewTransition() | Memicu transisi |
view-transition-name (CSS) | Identifikasi elemen yang dianimasi |
::view-transition-old(name) | Snapshot tampilan lama |
::view-transition-new(name) | Snapshot tampilan baru |
Kenapa Penting?
Untuk marketer, transisi halus meningkatkan persepsi kualitas brand dan menurunkan bounce rate di landing page interaktif. Untuk developer, mengurangi bundle size karena tidak perlu library animasi tambahan, yang berdampak positif pada LCP dan INP.
Praktik standar industri per April 2026 menunjukkan adopsi cepat di e-commerce premium dan portfolio personal brand karena efek visualnya kompetitif dengan native app.
Pertanyaan Umum
Apakah View Transition API sudah didukung semua browser?
Per April 2026, didukung Chrome 111+, Edge, Safari 18, dan Firefox masih di balik flag. Gunakan progressive enhancement dengan feature detection.
Apakah View Transition mempengaruhi Core Web Vitals?
Tidak langsung, tetapi animasi yang berat dapat memperburuk INP. Browser mengoptimalkan default, tapi transisi kompleks tetap perlu profiling.
Istilah Terkait