Catatan Kecil Soal Motion di Web

Animasi di web gagal biasanya bukan karena teknis, tapi karena tidak ada jawaban untuk satu pertanyaan: apa yang sedang dijelaskan oleh gerakan ini? Kalau jawabannya "supaya terlihat hidup", biasanya hasilnya justru terasa lambat.

Durasi

Angka yang saya pakai hampir selalu jatuh di rentang sempit. Perubahan kecil — hover, fokus, toggle — 120–180ms. Elemen masuk atau keluar layar — 220–320ms. Transisi antar konteks besar — 380–520ms, dan itu batas atas. Apa pun di atas 600ms terasa seperti menunggu.

Easing

Sesuatu yang muncul harus melambat di akhir; sesuatu yang pergi boleh mempercepat. Satu kurva favorit untuk hampir semua kasus masuk:

transition: transform .28s cubic-bezier(.16, 1, .3, 1);

Ia berhenti dengan lembut tanpa terasa memantul. Untuk keluar, kurva simetris terlalu sopan — potong durasinya sekitar 70% dan pakai easing yang lebih tajam.

Gerakan yang baik tidak diperhatikan. Yang diperhatikan orang adalah ketika sesuatu terasa pas.

Yang sering saya lupa

• prefers-reduced-motion bukan opsional. Sediakan versi statis yang tetap masuk akal.
• Animasikan transform dan opacity. Sisanya bikin browser bekerja dua kali.
• Kalau elemen muncul berurutan, jeda antar item 40–60ms sudah cukup. Lebih dari itu terasa seperti antrean.

Motion paling bagus yang pernah saya buat justru yang paling sedikit kodenya: satu properti, satu durasi, satu alasan jelas.