Designing for Motion & View Transitions

Published: 2026-09-07T06:35:27.000000Z | Author: devwardiman

Summary: Mengeksplorasi implementasi View Transitions API browser native dan CSS modern untuk menciptakan pengalaman navigasi web yang halus dan kontekstual.

Persepsi kecepatan sebuah situs web tidak hanya ditentukan oleh waktu respon server (Time to First Byte), tetapi juga oleh bagaimana mata pengguna merasakan pergantian halaman. Navigasi web tradisional sering kali menghasilkan layar putih sejenak (*flash of white*) yang merusak kontinuitas membaca.

Dengan hadirnya **View Transitions API** standar di peramban web modern, kita dapat menghadirkan animasi perpindahan antar halaman semulus aplikasi native dengan beberapa baris kode deklaratif.

---

## 1. Konsep Dasar Native View Transitions

Secara tradisional, membuat animasi transisi antar halaman di web memerlukan library JavaScript pihak ketiga yang berat atau implementasi SPA routing yang rumit. View Transitions API mengubah paradigma ini dengan mengambil snapshot visual tampilan lama dan baru, lalu melakukan cross-fade secara otomatis:

```javascript
// Mengaktifkan transisi saat navigasi
function navigateWithTransition(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}

document.startViewTransition(async () => {
await updateDOMToNewPage(url);
});
}
```

---

## 2. Integrasi Halus dengan Inertia.js & Vue 3

Pada peramban modern, Inertia.js v3 mendukung transisi ini secara langsung. Kita dapat mengaitkannya ke lifecycle router Inertia:

```typescript
// resources/js/app.ts
import { router } from '@inertiajs/vue3';

router.on('before', (event) => {
if (typeof document !== 'undefined' && 'startViewTransition' in document) {
event.detail.visit.viewTransition = true;
}
});
```

Dan pada tautan navigasi di template Vue, cukup tambahkan atribut `view-transition`:

```vue
<Link href="/posts/clean-code" view-transition class="hover:text-primary">
Baca Artikel Selengkapnya
</Link>
```

---

## 3. Mengontrol Animasi dengan CSS `view-transition-name`

Kekuatan sebenarnya dari View Transitions terasa saat kita menghubungkan elemen spesifik antar halaman (misalnya thumbnail kartu artikel di homepage yang bertransformasi membesar menjadi gambar sampul di halaman detail):

```css
/* Elemen di halaman daftar */
.article-thumbnail {
view-transition-name: post-cover-image;
}

/* Elemen gambar di halaman detail */
.article-banner {
view-transition-name: post-cover-image;
}
```

Browser akan mendeteksi kesamaan nama transisi ini dan menganimasikan posisi (*position*), ukuran (*dimension*), serta kelengkungan sudut (*border-radius*) dari kondisi awal ke kondisi akhir secara otomatis dengan akselerasi GPU (60fps).

---

## 4. Aksesibilitas: Menghormati `prefers-reduced-motion`

Tidak semua pengguna menyukai atau nyaman dengan gerakan dinamis di layar. Pengembang wajib menghormati preferensi sistem operasi pengguna:

```css
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
```

---

## Kesimpulan

Animasi dan pergerakan di web bukan sekadar dekorasi visual, melainkan petunjuk spasial (*spatial cues*) yang membantu pengguna memahami navigasi hierarki konten. Dengan memanfaatkan View Transitions API native, performa aplikasi tetap terjaga ringan tanpa beban runtime JavaScript yang berlebihan.