Digital Transformation
View Transitions API
View Transitions API adalah fitur web modern yang memungkinkan transisi animasi mulus antar state atau halaman tanpa library JavaScript tambahan, membuat website terasa seperti aplikasi native.
TL;DR: View Transitions API adalah API browser yang menjalankan animasi otomatis ketika DOM berubah, baik antar state di satu halaman maupun antar halaman dalam navigasi multi-page. Sejak 2024, API ini sudah didukung Chrome dan Edge, lalu Safari di 2025, sehingga website biasa bisa terasa seperti aplikasi native tanpa framework SPA berat.
Apa itu View Transitions API?
View Transitions API adalah cara browser mengambil snapshot tampilan lama, mengganti DOM, lalu menganimasikan transisi ke tampilan baru secara otomatis. Marketer bisa membayangkannya seperti dissolve di video editor, hanya saja browser yang menjalankan dissolve antara dua frame halaman secara real time. API ini bekerja untuk dua skenario: same-document (misal filter produk berubah) dan cross-document (navigasi dari /produk ke /produk/laptop). Untuk konteks performa keseluruhan, lihat juga Core Web Vitals dan Streaming Metadata di Next.js.
Cara Kerja Singkat
| Tahap | Apa yang Browser Lakukan |
|---|---|
| Capture | Snapshot tampilan lama sebelum DOM berubah |
| Update | Menjalankan perubahan DOM (oleh React, Next.js, atau navigasi) |
| Animate | Crossfade default, atau kustom via ::view-transition-* di CSS |
Developer cukup memanggil document.startViewTransition(updateCallback) untuk same-document, atau menambahkan @view-transition { navigation: auto; } di CSS untuk cross-document. Sisanya browser yang urus.
Kenapa Penting?
Pengguna Indonesia, terutama di tier 2 dan tier 3, masih banyak memakai perangkat mid-range. SPA berat sering memboroskan JavaScript dan memperburuk INP. View Transitions API memberi efek visual aplikasi native tanpa harus mengirim runtime SPA, sehingga performa tetap kompetitif. Untuk bisnis, ini berarti bounce rate turun dan persepsi kualitas merek naik tanpa rewrite arsitektur.
Pertanyaan Umum
Apakah View Transitions API menggantikan Framer Motion?
Tidak. Framer Motion masih unggul untuk animasi kompleks per-komponen. View Transitions API ideal untuk transisi antar tampilan besar, dan sering dipakai berdampingan dengan library animasi.
Apakah aman dipakai di production sekarang?
Ya, dengan progressive enhancement. Browser lama akan abaikan API ini dan navigasi tetap bekerja seperti biasa, sehingga tidak ada risiko regresi.
Istilah Terkait