Motion design adalah memutuskan kenapa sesuatu bergerak, berapa lama, dalam urutan apa, dan untuk siapa dia sebaiknya diam. Bayangin Bu Sri menyambut tamu di Homestay Kabut. Saat kamu memesan, dia mengangguk (tanda pesananmu didengar). Saat kamu bingung, dia menunjuk ke arah kamarmu. Lalu dia berjalan mengantarmu dari meja depan ke pintu kamar, jadi kamu gak tiba-tiba "muncul" di tempat lain. Dia gak menari di depanmu tanpa alasan, dan untuk tamu yang gampang pusing, dia cukup bicara pelan tanpa banyak gerak. Animasi di halaman pemesanannya harus sama.
🧪 Tebakan cepat: Kartu kamar masuk dalam 600 ms, dengan
linear, bergeser 250 px. Kalau penilaian mulai dari 100 dan tiap masalah mengurangi 20, berapa skornya? Jawabannya ada di bagian "Menilai animasi dengan aturan".
Tiga alasan sesuatu boleh bergerak
| Alasan | Artinya | Di halaman Bu Sri |
|---|---|---|
| Feedback (umpan balik) | "aksimu diterima" | tombol "2 malam" mengecil ke scale(0.96) selama 100 ms, total naik 4 px |
| Orientasi | "lihat ke sini" | dialog "Pesan Kamar Teras?" muncul di tengah, latarnya diredupkan |
| Kontinuitas | "ini benda yang sama, cuma pindah" | foto galeri meluncur 300 ms ke foto berikutnya, bukan langsung berganti |
Kalau sebuah gerak gak masuk salah satu kolom itu, hapus. Apple Human Interface Guidelines (halaman Motion) menulisnya sebagai saran pertama: "Add motion purposefully, supporting the experience without overshadowing it."
12 prinsip animasi, dibawa ke UI
Dua belas prinsip ini dirumuskan Frank Thomas dan Ollie Johnston, animator Disney, di buku Disney Animation: The Illusion of Life (Abbeville Press, 1981), bab "The Principles of Animation". Untuk kartun, gerakannya dibesar-besarkan; di UI dipakai versi halusnya:
| Prinsip | Di UI | Contoh di alur pemesanan |
|---|---|---|
| 1. Squash and Stretch | bentuk sedikit berubah saat ditekan | tombol scale(0.96) |
| 2. Anticipation | gerak kecil sebelum aksi utama | tombol mengecil dulu, baru dialog muncul |
| 3. Staging | satu fokus dalam satu waktu | dialog di tengah, latar redup |
| 4. Straight Ahead Action and Pose to Pose | pose ke pose = keyframe; straight ahead = dihitung frame demi frame | @keyframes kartu vs konfeti canvas |
| 5. Follow Through and Overlapping Action | bagian-bagian gak berhenti bersamaan | kartu masuk berselang 60 ms |
| 6. Slow In and Slow Out | percepatan dan perlambatan, alias easing | masuk ease-out, keluar ease-in |
| 7. Arcs | jalur melengkung untuk gerak jauh | jarang dipakai di kartu kecil |
| 8. Secondary Action | gerak pendukung yang gak mencuri fokus | titik-titik "menyimpan" di tombol |
| 9. Timing | durasi menentukan karakter | 100 ms tekan, 300 ms kartu |
| 10. Exaggeration | sedikit dilebihkan supaya terbaca | pantulan pegas kecil, hemat |
| 11. Solid Drawing | bentuk dan kedalaman tetap konsisten | bayangan kartu yang dibalik 3D |
| 12. Appeal | enak dilihat, sesuai karakter | hijau tenang Homestay Kabut, gak ada yang heboh |
Anticipation adalah jawaban untuk "reaksi sebelum aksi utama": karakter jongkok dulu sebelum melompat. Ease in/out berbeda: itu soal percepatan di dalam satu gerak, bukan gerak tambahan sebelumnya.
Token Material 3 dan saran Apple
Material 3 memberi nama untuk easing dan durasi, jadi satu tim memakai angka yang sama (cara memilihnya ada di pelajaran Easing & Timing Functions):
| Token | Nilai |
|---|---|
md.sys.motion.easing.emphasized |
kurva dua segmen; di token web ditulis cubic-bezier(0.2, 0, 0, 1) |
md.sys.motion.easing.emphasized-decelerate (masuk) |
cubic-bezier(0.05, 0.7, 0.1, 1) |
md.sys.motion.easing.emphasized-accelerate (keluar) |
cubic-bezier(0.3, 0, 0.8, 0.15) |
md.sys.motion.easing.standard |
cubic-bezier(0.2, 0, 0, 1) |
md.sys.motion.duration.short1 sampai short4 |
50, 100, 150, 200 ms |
medium1 sampai medium4 |
250, 300, 350, 400 ms |
long1 sampai long4 |
450, 500, 550, 600 ms |
Saran Apple di halaman Motion yang paling sering kepakai untuk web: "Make motion optional.", "Aim for brevity and precision in feedback animations.", "In apps, generally avoid adding motion to UI interactions that occur frequently.", dan "Let people cancel motion." Artinya: tombol yang ditekan puluhan kali gak perlu memantul, dan tombol lain tetap bisa diklik selama animasi jalan.
Untuk durasi, Nielsen Norman Group (Page Laubheimer, 9 Februari 2020) menulis kebanyakan animasi UI ada di 100 sampai 500 ms, umpan balik sederhana (checkbox, toggle) sekitar 100 ms, jendela modal 200 sampai 300 ms, dan "At 500ms, animations start to feel like a real drag for users." Jadi micro-interaction (tombol, tooltip) ada di 100 sampai 300 ms.
Koreografi alur pemesanan
Koreografi = urutan dan jeda antar gerak. Alur Bu Sri dari tombol malam sampai toast:
| Waktu | Yang bergerak | Durasi, easing | Alasan |
|---|---|---|---|
| 0 ms | tombol "2 malam" mengecil, warnanya jadi hijau | 100 ms ease-out, warna 150 ms |
feedback |
| 0 ms | total jadi Rp 700.000, naik 4 px | 200 ms ease-out |
feedback |
| klik "Pesan kamar" | dialog masuk, latar redup | 200 ms ease-out |
orientasi |
| klik "Ya, pesan" | dialog keluar | 150 ms ease-in |
kontinuitas |
| +150 ms | toast masuk | 200 ms ease-out |
feedback |
| +350 ms | bar 5 detik berjalan | 5.000 ms linear |
waktu tersisa |
Aturannya: satu fokus dalam satu waktu (toast baru masuk setelah dialog keluar), yang keluar lebih cepat dari yang masuk (150 ms vs 200 ms), dan gak ada gerak yang mengunci tombol.
Gerak dan aksesibilitas
Sebagian orang punya gangguan vestibular (organ keseimbangan di telinga dalam). Menurut penjelasan WCAG, gerak yang gak perlu, seperti parallax atau elemen yang ikut bergeser saat di-scroll, bisa memicu pusing, mual, dan sakit kepala. Itu alasan media query prefers-reduced-motion ada. Dua kriteria WCAG 2.2 yang mengatur gerak:
- 2.3.3 Animation from Interactions (Level AAA): "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed." Gerak yang dipicu interaksi bisa dimatikan, kecuali geraknya memang inti fungsi atau informasinya.
- 2.2.2 Pause, Stop, Hide (Level A): "For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential". Gerak yang mulai sendiri dan lebih dari 5 detik butuh tombol jeda.
@media (prefers-reduced-motion: reduce) {
.room, .modal, .toast {
animation-name: muncul; /* geraknya dibuang... */
animation-duration: 150ms; /* ...tinggal fade 150 ms */
}
@keyframes muncul { from { opacity: 0; } }
}
"Kurangi gerakan" bukan "matikan semua": perubahan keadaannya tetap terlihat (fade 150 ms), yang dibuang perpindahannya.
Menilai animasi dengan aturan
Latihannya mengubah saran di atas jadi tiga pemeriksaan sederhana:
function evaluateAnimation(props) {
const issues = [];
if (props.duration > 500) issues.push('too slow'); // Timing: lewat 500 ms terasa menyeret
if (props.easing === 'linear') issues.push('use easing curve'); // Slow In and Slow Out
if (props.distance > 200) issues.push('too much movement'); // gerak besar, risiko vestibular
return { score: 100 - issues.length * 20, issues }; // hasDelay gak dinilai
}
| Masukan | issues |
score |
|---|---|---|
300 ms, ease-out, 100 px |
[] |
100 |
600 ms, linear, 250 px |
tiga-tiganya | 40 |
400 ms, linear, 150 px |
["use easing curve"] |
80 |
501 ms, ease-out, 201 px |
["too slow","too much movement"] |
60 |
Itu jawaban tebakannya: 40. Perhatikan >: 500 ms dan 200 px masih lolos, 501 dan 201 sudah gak.
⚠️ Jebakan yang sering ketemu
- Bergerak karena bisa. Gerak tanpa alasan feedback, orientasi, atau kontinuitas cuma menambah waktu tunggu.
- Keluar selambat masuk. Orang sudah gak menunggu yang keluar: 150 ms keluar, 200 ms masuk.
- Pantulan di interaksi yang sering. Tombol malam yang memantul 400 ms terasa melelahkan di klik kesepuluh.
- "Kurangi gerakan" mematikan feedback. Buang perpindahannya, pertahankan fade 150 ms supaya perubahan tetap terlihat.
>=di latihan. Aturannya "lebih dari 500" dan "lebih dari 200"; dengan>=, 500 ms ikut dihukum.
TL;DR: Gerak harus punya alasan: feedback, orientasi, atau kontinuitas (Apple HIG Motion: "Add motion purposefully", "Make motion optional", "Let people cancel motion"). 12 prinsip dari Frank Thomas dan Ollie Johnston, Disney Animation: The Illusion of Life (1981): Squash and Stretch, Anticipation (gerak kecil sebelum aksi utama), Staging, Straight Ahead and Pose to Pose, Follow Through and Overlapping Action, Slow In and Slow Out, Arcs, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal. Token Material 3: easing emphasized, emphasized-decelerate, emphasized-accelerate, standard; durasi short1 sampai short4 (50 sampai 200 ms), medium1 sampai medium4 (250 sampai 400 ms), long1 sampai long4 (450 sampai 600 ms). Micro-interaction 100 sampai 300 ms; lewat 500 ms terasa menyeret (NN/g). Koreografi: satu fokus dalam satu waktu, keluar lebih cepat dari masuk. Gangguan vestibular membuat gerak besar memicu pusing dan mual: hormati prefers-reduced-motion (fade 150 ms, tanpa perpindahan); WCAG 2.3.3 (AAA) gerak dari interaksi bisa dimatikan, WCAG 2.2.2 (A) gerak otomatis lebih dari 5 detik butuh jeda. Latihan: duration > 500 "too slow", easing === "linear" "use easing curve", distance > 200 "too much movement", skor 100 dikurangi 20 per masalah.
