CSS View Transitions API

TL;DR: CSS View Transitions API adalah fitur browser native yang memutar animasi morf antar dua state DOM atau antar dua halaman, cukup dengan satu baris CSS dan satu fungsi JavaScript. Per Mei 2026, API ini stabil di Chrome 111+ dan Safari 18, memungkinkan transisi sekelas aplikasi mobile pada website Next.js tanpa Framer Motion atau GSAP.

Apa itu CSS View Transitions?

CSS View Transitions API menangkap snapshot DOM sebelum dan sesudah perubahan, lalu memutar transisi cross-fade atau morf antara keduanya. Untuk transisi antar halaman, cukup tambahkan meta @view-transition { navigation: auto; } di CSS. Untuk transisi antar state, panggil document.startViewTransition(updateCallback) di JavaScript. Browser otomatis menanam pseudo-element ::view-transition-old(root) dan ::view-transition-new(root) yang bisa diatur durasi serta easing-nya. API ini melengkapi Core Web Vitals karena transisi mulus menurunkan persepsi waktu loading.

Cara Kerja Singkat

Browser mengikuti tiga langkah: snapshot state lama menjadi image, terapkan perubahan DOM, lalu putar animasi dari image lama ke image baru. Setiap elemen yang ditandai view-transition-name: <id> mendapat track animasi terpisah, sehingga gambar produk bisa morf ke detail produk tanpa mempengaruhi sisa halaman. Pendekatan ini sejalan dengan pengukuran INP karena animasi berjalan di compositor thread, bukan di main thread.

Kenapa Penting untuk Website Bisnis Indonesia?

UMKM Indonesia banyak yang mengejar feel aplikasi mobile di website katalog, tetapi terbentur ukuran JavaScript yang menggembungkan LCP. View Transitions menyelesaikan ini secara native. Dalam beberapa proyek terakhir, saya melihat penghapusan library animasi pihak ketiga bisa memangkas 30 sampai 60 KB JavaScript, yang berimplikasi langsung pada skor Web Vitals di koneksi 4G Indonesia.

Pertanyaan Umum

Apakah View Transitions berjalan di semua browser?

Per Mei 2026, dukungan stabil di Chrome 111 ke atas dan Safari 18. Firefox masih di belakang origin trial. Pakai progressive enhancement: jika API tidak ada, perubahan DOM tetap berjalan tanpa animasi.

Apakah perlu library tambahan?

Tidak. View Transitions sudah cukup untuk 80 persen kasus animasi UI. Library seperti Framer Motion baru relevan saat butuh kontrol gesture kompleks atau orchestration multi-element.