Motion Design Principles

Motion Design bukan sekadar membuat sesuatu bergerak — ini tentang membuat gerakan yang bermakna, komunikatif, dan terasa alami. Prinsip-prinsip ini berakar dari animasi tradisional yang dikembangkan Disney pada tahun 1930-an.

12 Prinsip Animasi Disney

1. Squash & Stretch

Objek yang realistis berubah bentuk saat bergerak — memipih saat tertekan, memanjang saat dilempar:

// Tombol yang "ditekan"
const button = {
  scaleX: pressed ? 1.1 : 1,
  scaleY: pressed ? 0.9 : 1,
};

2. Anticipation

Gerakan kecil ke arah berlawanan sebelum aksi utama — membuat animasi terasa lebih alami:

@keyframes jump {
  0% { transform: translateY(0); }
  20% { transform: translateY(10px); }  /* crouch */
  50% { transform: translateY(-60px); } /* jump */
  100% { transform: translateY(0); }
}

3. Staging

Satu fokus di satu waktu — animasi harus mengarahkan perhatian user:

// Tampilkan satu elemen penting dulu, baru sisanya
const sequence = [
  { element: '.hero-title', delay: 0 },
  { element: '.hero-desc', delay: 200 },
  { element: '.hero-cta', delay: 400 },
];

4. Slow In, Slow Out (Easing)

Objek nyata tidak bergerak dengan kecepatan konstan. Gunakan easing:

/* Jangan linear */
.bad { transition: transform 0.3s linear; }

/* Gunakan ease */
.good { transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }

5. Follow Through & Overlapping Action

Bagian yang berbeda dari objek bergerak pada waktu yang berbeda:

// Kepala dulu, rambut menyusul
<motion.div animate={{ x: 100 }}>
  <motion.span animate={{ x: 100 }} transition={{ delay: 0.1 }}>
    rambut
  </motion.span>
</motion.div>

6. Secondary Action

Gerakan tambahan yang mendukung aksi utama tapi tidak mendominasi:

// Ikon berputar saat loading (secondary) + teks berubah (primary)
const LoadingButton = ({ loading }) => (
  <button>
    {loading && <Spinner className="animate-spin" />} {/* secondary */}
    {loading ? 'Memproses...' : 'Kirim'}              {/* primary */}
  </button>
);

7. Timing

Jumlah frame (atau ms) menentukan karakter gerakan:

8. Exaggeration

Sedikit berlebihan membuat animasi terasa lebih ekspresif dan menyenangkan:

// Bounce overshoot yang sedikit berlebihan
transition={{ type: 'spring', stiffness: 400, damping: 10 }}

9. Solid Drawing

Perhatikan depth dan perspektif — bahkan di UI 2D:

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

10. Appeal

Animasi harus menyenangkan untuk dilihat — karakter yang kuat, gerakan yang clean.

Prinsip Modern: Material Design Motion

Google Material Design menambahkan prinsip-prinsip modern:

// 1. Informative — gerakan menjelaskan hubungan antar elemen
// Shared element transition menjelaskan bahwa card dan detail adalah satu
<motion.div layoutId="card-{id}" />

// 2. Focused — satu animasi utama, minimalisir gangguan
// Jangan animasi semua elemen sekaligus

// 3. Expressive — karakter brand tercermin dalam gerakan
// Startup energik = spring bouncy, app enterprise = easing smooth

Hierarchy of Motion

Urutkan animasi berdasarkan kepentingan:

1. Primary — aksi yang user lakukan (klik, submit)
2. Secondary — respons sistem (loading, sukses)
3. Ambient — dekorasi (parallax, idle animation)

Prinsip-prinsip ini adalah intuisi yang bisa diasah — semakin sering kamu menonton dan membuat animasi, semakin tajam sense-mu untuk gerakan yang terasa "benar".