View Transitions API

View Transitions API adalah cara baru (Chrome 111+, Maret 2023) untuk membuat transisi halus antara dua state UI — tanpa harus repot sinkron animasi keluar (exit) dan masuk (enter). Browser otomatis meng-snapshot sebelum dan sesudah, lalu meng-animasi perbedaannya.

Cocok untuk: tab switcher, page navigation (SPA), modal open/close, filter UI yang ganti konten, dan shared element transitions (contoh: thumbnail berubah jadi full image saat diklik, seperti di aplikasi galeri).

Sintaks Dasar

function updateUI() {
  // Cek dukungan dulu
  if (!document.startViewTransition) {
    updateDOM();   // fallback: update langsung tanpa animasi
    return;
  }

  document.startViewTransition(() => {
    updateDOM();   // DOM mutation di dalam callback
  });
}

function updateDOM() {
  // Ubah konten apapun yang kamu mau
  document.querySelector('.content').innerHTML = newContent;
}

Browser akan:

1. Snapshot state lama (screenshot visual elemen)
2. Jalanin callback (DOM berubah)
3. Snapshot state baru
4. Crossfade antara dua snapshot dengan CSS animation default

Customize dengan CSS

Default-nya crossfade, tapi kamu bisa replace dengan animasi custom:

/* Animasi exit untuk state lama */
::view-transition-old(root) {
  animation: 200ms ease-out both fade-out;
}

/* Animasi enter untuk state baru */
::view-transition-new(root) {
  animation: 300ms ease-out both slide-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(30px); opacity: 0; }
}

Shared Element Transition

Kasih view-transition-name yang sama ke elemen di state lama & baru — browser otomatis anggap mereka "elemen yang sama" dan menganimasi perubahan posisi/ukuran.

.thumbnail {
  view-transition-name: hero-image;
}

.full-image {
  view-transition-name: hero-image;  /* sama! */
}

Ketika DOM swap thumbnail → full image, browser akan animasi transform dari posisi/ukuran thumbnail ke full image. Ini magic-nya — sebelumnya butuh ratusan baris JS + math untuk efek seperti ini.

Contoh: Tab Switcher

<div class="tabs">
  <button data-tab="home">Home</button>
  <button data-tab="about">About</button>
</div>
<div id="content">Home content</div>

document.querySelectorAll('[data-tab]').forEach(btn => {
  btn.addEventListener('click', () => {
    const tab = btn.dataset.tab;

    if (!document.startViewTransition) {
      renderContent(tab);
      return;
    }

    document.startViewTransition(() => renderContent(tab));
  });
});

function renderContent(tab) {
  document.getElementById('content').textContent = \`${tab} content\`;
}

⚠️ Dukungan Browser

• Chrome/Edge 111+ (Maret 2023) — supported
• Safari 18+ (September 2024) — supported
• Firefox — belum didukung (per April 2026, experimental flag)

Wajib feature detect dengan if (!document.startViewTransition) dan sediakan fallback. Cek caniuse.com/view-transitions untuk status terkini.

Kapan Pakai API Ini?

• SPA navigation dengan framework (Astro, Next.js App Router sudah integrasi native)
• Shared element transitions yang sebelumnya butuh Framer Motion / AnimateSharedLayout
• UI state changes yang besar (filter, sort, pagination) supaya terasa halus
• Jangan pakai untuk animasi kecil (hover, ripple) — overkill; pakai CSS transition

Prinsip: View Transitions API bukan pengganti semua animasi, tapi killer feature untuk transisi state yang sebelumnya rumit.