Belajar Frontend - Animasi & Interaction

#Pendahuluan

Setelah memastikan TokoKita accessible di episode 15, saatnya membuat antarmuka terasa hidup: animasi. Animasi yang baik bukan hiasan — ia memberi feedback (tombol menekan), membangun konteks (menu muncul dari arah yang logis), dan memandu perhatian. Animasi yang buruk terasa lambat dan mengganggu.

Episode 16 menggabungkan apa yang sudah kalian pelajari: performa (episode 12), UX (episode 1), dan aksesibilitas (episode 15). Aturan utamanya: animasi harus halus (60fps), bermakna, dan hormat pada preferensi pengguna.

#Prinsip Performa Animasi

Ini kunci yang membedakan animasi profesional dari animasi "janky": browser merender tiga properti di GPU — tanpa memicu layout/paint ulang:

Properti yang murah untuk dianimasikan

transform: translate(...) scale(...) rotate(...);
opacity: 0 → 1;

Hindari menganimasikan width, height, top, left, margin — semuanya memicu layout (ingat reflow di episode 2) dan pasti jank pada perangkat menengah. Kalau harus menggeser elemen, pakai transform: translate, bukan top/left.

Transition yang benar

.btn-add {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn-add:active {
  transform: scale(0.96);
}

#CSS Transitions dan Keyframes

Transition — animasi dari satu kondisi ke kondisi lain (hover, active):

Tombol dengan umpan balik

.btn-add:hover {
  transform: translateY(-2px);
}

Keyframes — animasi multi-tahap:

Skeleton loading katalog

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
 
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
}

Skeleton loading adalah micro-interaction yang "mengisi" waktu tunggu fetch (episode 11) tanpa memberi kesan halaman macet.

#Web Animations API

Saat animasi butuh kontrol dari JavaScript (play/pause, reverse, sinkron dengan state), gunakan Web Animations API (WAAPI) — alternatif native yang ringan, tanpa library:

export function animateCartItem(el: HTMLElement) {
  el.animate(
    [
      { transform: "scale(0.8)", opacity: 0 },
      { transform: "scale(1)", opacity: 1 },
    ],
    { duration: 250, easing: "ease-out" }
  );
}

element.animate() mengembalikan animasi yang bisa di-cancel() dan reverse() — ideal untuk micro-interaction tanpa menambah dependency.

#Micro-Interactions

Micro-interactions adalah umpan balik kecil pada aksi pengguna — dan inilah "rasa" sebuah produk:

Durasi ideal: 150-300ms. Lebih cepat terasa menyentak, lebih lambat terasa lelet. Konsistenkan easing (mis. cubic-bezier(0.2, 0, 0, 1)) di seluruh aplikasi — bisa disimpan sebagai design token (episode 10).

#Menghormati prefers-reduced-motion

Banyak pengguna (migrain, gangguan vestibular) membutuhkan animasi dikurangi. CSS menyediakan media query khusus:

Menonaktifkan animasi sesuai preferensi

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#Praktik: Interaksi Halus TokoKita

Rancang tiga micro-interaction untuk alur utama:

1. Tambah produk — tombol scale 0.96 saat ditekan; badge keranjang bounce via WAAPI.
2. Skeleton katalog — shimmer saat isLoading dari TanStack Query (episode 11).
3. Dialog checkout — fade + scale masuk (opacity + transform), diikuti prefers-reduced-motion.

import { useEffect, useRef } from "react";
 
export function CartBadge({ count }: { count: number }) {
  const ref = useRef<HTMLSpanElement>(null);
 
  useEffect(() => {
    if (count > 0) ref.current?.animate(
      [{ transform: "scale(1)" }, { transform: "scale(1.4)" }, { transform: "scale(1)" }],
      { duration: 300, easing: "ease-in-out" }
    );
  }, [count]);
 
  return <span ref={ref} className="cart-badge">{count}</span>;
}

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• Animasikan hanya transform dan opacity — keduanya berjalan di GPU tanpa reflow.
• Transition untuk perubahan kondisi, keyframes untuk multi-tahap, WAAPI untuk kontrol JavaScript.
• Micro-interactions (150-300ms) memberi "rasa" produk; konsistenkan easing sebagai token.
• Hormati prefers-reduced-motion — ini syarat aksesibilitas.

Di episode 17 selanjutnya kita menaikkan skala arsitektur: micro-frontends & module federation — memecah aplikasi besar menjadi beberapa tim yang deploy secara independen, pendekatan yang makin matang di 2026. Sampai jumpa di episode 17!