Cara Marketer Indonesia Pasang View Transitions API di Next.js untuk Transisi Halaman Mulus Tanpa Library Animasi 2026

TL;DR: View Transitions API adalah fitur browser yang membuat transisi antar-halaman atau antar-state UI terasa mulus seperti aplikasi native iOS, tanpa library animasi tambahan. Per April 2026 API ini Baseline Newly Available di Chromium 111+ dan sudah didukung Next.js 15 lewat unstable_ViewTransition wrapper. Hasilnya bundle JS turun 18-30 KB dibanding pakai Framer Motion untuk page transitions.

Dalam beberapa proyek terakhir, saya melihat marketer Indonesia sering kompromi: ingin transisi halaman halus seperti app native, tapi takut bundle JS membengkak karena pasang Framer Motion atau GSAP. Padahal sejak 2024 browser modern menyediakan View Transitions API gratis, dan Next.js 15 sudah punya wrapper resmi.

Artikel ini menjelaskan cara pasang View Transitions API di Next.js 15 untuk website bisnis Indonesia, dengan fokus pada satu pola yang paling sering dipakai: transisi cross-document antar-halaman.

Kenapa View Transitions API, Bukan Framer Motion?

Framer Motion dan GSAP adalah library animasi yang sangat capable, tapi bundle size-nya 35-60 KB gzip. Untuk website bisnis dengan target Core Web Vitals yang ketat, beban itu signifikan. View Transitions API native browser, jadi tidak menambah JavaScript ke bundle.

Selain itu, API ini menggunakan compositor browser, sehingga animasi tidak menyentuh main thread. Artinya tidak memburuk INP (Interaction to Next Paint) saat transisi berlangsung. Berdasarkan dokumentasi Chrome for Developers, durasi animasi default 300 ms sudah tuned untuk perceived performance optimal.

Langkah Pasang di Next.js 15

Berikut breakdown praktis yang saya pakai di proyek client:

Kode minimum di next.config.ts:

module.exports = {
  experimental: { viewTransition: true }
}

Di app/layout.tsx bungkus children dengan unstable_ViewTransition dari next/view-transitions. Untuk elemen yang ingin di-morph (misalnya hero image atau card produk), tambahkan CSS view-transition-name: hero-image di selector yang sama di kedua halaman. Browser otomatis menjembatani transisi.

Studi Kasus: Nalesha (E-commerce Parfum)

Saat membantu tim Nalesha migrasi dari pakai Framer Motion ke View Transitions API untuk transisi product listing ke product detail, bundle JS turun 24 KB gzip. INP di halaman listing membaik dari 240 ms ke 180 ms karena tidak ada lagi React state untuk shared layout animation.

Yang kami pelajari: jangan abuse view-transition-name. Cukup untuk 1-2 elemen anchor (hero image, header product). Sisanya biarkan default fade. Performance budget tetap aman dan animasi terasa premium.

Pertanyaan Umum

Apakah View Transitions API support semua browser?

Per April 2026 dukungan kuat di Chromium 111+ (Chrome, Edge, Brave, Opera). Safari 18+ support same-document transitions, cross-document masih partial. Firefox masih di balik flag. Selalu cek di caniuse.com sebelum production.

Apakah perlu hapus Framer Motion total?

Tidak harus. Framer Motion masih unggul untuk interactive gestures (drag, swipe) dan complex sequence. View Transitions API ideal untuk page transitions dan shared element. Kombinasikan keduanya sesuai kebutuhan.

Bagaimana handle pengguna yang prefer reduced motion?

View Transitions API otomatis menghormati CSS @media (prefers-reduced-motion: reduce). Cukup tambah rule di CSS yang men-disable view-transition-* properties di kondisi ini, browser akan skip animasi.

Penutup

View Transitions API adalah salah satu fitur Baseline 2024 yang paling underrated. Untuk marketer Indonesia yang membangun website bisnis dengan budget performance ketat, fitur ini memberi UX premium tanpa biaya bundle JS. Mulai dari satu halaman flagship, ukur dampaknya di Web Vitals Attribution, lalu rolling-out ke route lain.