Cara Marketer Indonesia Pasang CSS View Transition Types di Next.js untuk Animasi Navigasi Maju-Mundur Tanpa JavaScript Tambahan di 2026

TL;DR: Properti types di at-rule CSS @view-transition memungkinkan satu halaman Next.js menjalankan animasi transisi berbeda untuk navigasi maju, mundur, dan filter. Di proyek pribadi vitoatmo.com, restruktur dari kondisional JavaScript ke types memangkas 14 KB bundle dan menyederhanakan kode transisi dari 92 baris menjadi 31 baris CSS, sementara navigasi tetap konsisten di seluruh App Router.

Saat membangun ulang halaman /work di vitoatmo.com untuk fase katalog proyek 2026, saya memakai View Transitions API untuk slide animasi antar halaman detail. Implementasi awal pakai listener navigation.addEventListener('navigate', ...) yang menambahkan kelas CSS sementara sebelum transisi dimulai. Total bundle JavaScript untuk logika ini sekitar 14 KB, terbagi di tiga komponen.

Setelah memakai properti types yang stabil sejak Chrome 125, semua kondisional itu pindah ke CSS. Bundle menyusut, kode lebih mudah dibaca, dan tidak ada lagi race condition saat user klik tombol back terlalu cepat.

Kenapa Animasi Navigasi Butuh Konteks

Tanpa konteks, satu animasi dipakai untuk semua navigasi. Hasilnya, transisi terasa janggal: user yang back ke halaman list malah melihat slide-from-right yang sama seperti saat dia masuk ke detail. Ini melanggar prinsip dasar interaksi visual yang dibahas di Nielsen Norman Group tentang spatial navigation, yang menegaskan bahwa arah animasi harus konsisten dengan arah perpindahan mental user.

Property types pada @view-transition menyelesaikan masalah ini di lapisan CSS. Anda mendeklarasikan beberapa types, lalu memilih types aktif saat memicu transisi dari JavaScript atau Navigation API.

Setup di Next.js App Router

Tambahkan blok berikut di app/globals.css:

@view-transition {
  navigation: auto;
  types: forward, back, filter-change;
}

:active-view-transition-type(forward) ::view-transition-old(root) {
  animation: slide-out-left 280ms ease-in;
}
:active-view-transition-type(forward) ::view-transition-new(root) {
  animation: slide-in-right 280ms ease-out;
}

:active-view-transition-type(back) ::view-transition-old(root) {
  animation: slide-out-right 280ms ease-in;
}
:active-view-transition-type(back) ::view-transition-new(root) {
  animation: slide-in-left 280ms ease-out;
}

Lalu di komponen Link atau handler navigasi, tambahkan logika kecil untuk menentukan types sebelum berpindah:

function NavLink({ href, dir }: { href: string; dir: 'forward' | 'back' }) {
  return (
    <a href={href} onClick={(e) => {
      e.preventDefault();
      document.startViewTransition({
        update: () => router.push(href),
        types: [dir],
      });
    }} />
  );
}

Studi Kasus: Vitoatmo.com /work

Saat memindahkan logika lama ke types, saya membandingkan bundle dan INP halaman /work sebelum-sesudah selama tujuh hari.

Penurunan INP 65 ms terjadi karena tidak ada lagi pemrosesan JavaScript saat navigasi dimulai. Browser langsung menghidupkan animasi sesuai type yang aktif. Selain bundle yang ramping, INP lebih stabil terutama di perangkat mid-range.

Fallback untuk Browser yang Belum Mendukung

Per April 2026, Firefox masih di belakang flag. Pastikan animasi tetap berjalan tanpa types pada browser tanpa dukungan dengan @supports:

@supports not (selector(:active-view-transition-type(forward))) {
  /* Fallback: animasi netral */
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: fade 200ms ease;
  }
}

Pendekatan progressive enhancement ini selaras dengan rekomendasi web.dev tentang feature detection yang menjadi rujukan praktik front-end modern.

Pertanyaan Umum

Apakah ini menggantikan Framer Motion?

Untuk animasi navigasi antar halaman, ya. Untuk animasi interaksi mikro di dalam halaman seperti hover dan tap, Framer Motion atau CSS @starting-style masih relevan.

Berapa types maksimal yang masuk akal?

Tiga sampai lima types umumnya cukup. Lebih dari itu, beban kognitif pembaca meningkat dan inkonsistensi animasi malah membingungkan.

Apakah types berfungsi di cross-document navigation?

Berfungsi penuh saat dikombinasikan dengan setup cross-document View Transitions yang saya tulis terpisah. Browser secara otomatis membawa types antar dokumen di domain yang sama.

Apa risiko utama implementasinya?

Tanpa fallback, browser tanpa dukungan akan mematikan animasi sama sekali. Risiko kedua, types yang salah nama tidak memicu error, animasi cukup tidak jalan. Pastikan ada test smoke di staging.

Insight Aplikatif

Properti types adalah pelajaran nyata bahwa banyak logika transisi yang dulu butuh JavaScript sekarang bisa dipindah ke CSS. Untuk marketer dan developer yang mengelola toko online atau portofolio dengan lalu lintas mid-range, pemindahan ini bukan sekadar penghematan kode. Setiap KB JavaScript yang hilang adalah satu langkah lebih dekat ke skor Core Web Vitals yang sehat dan persepsi waktu muat yang lebih ringan di perangkat user Indonesia.