Perbedaan antara animasi yang bagus dan animasi yang luar biasa

• Animasi adalah elemen kunci yang menentukan kualitas UI, bukan sekadar enak dilihat, tetapi juga memberikan kesan yang alami dan interaksi yang intuitif
• Untuk membuat animasi yang luar biasa, pemahaman terhadap titik asal, pemilihan easing yang tepat, pemanfaatan efek pegas, dan pemahaman mendalam terhadap alat adalah hal yang wajib
• Dibanding fungsi easing CSS bawaan, kurva easing kustom dapat menyampaikan imersi dan energi yang lebih kuat
• Dengan hook useSpring dari Framer Motion, interaksi berbasis posisi mouse terasa lebih realistis dan halus
• Semakin dalam pemahaman terhadap properti CSS, semakin besar kemampuan untuk mewujudkan animasi baru secara kreatif atau meningkatkan animasi yang sudah ada

---

Animasi yang sadar titik asal

• Dropdown yang terbuka saat tombol diklik akan terasa lebih alami bila gerakannya dimulai dari posisi tombol
• Alih-alih nilai bawaan transform-origin: center, mengaturnya ke bottom center membuatnya terasa lebih natural secara visual
• Jika menggunakan Radix atau shadcn/ui, ini bisa ditangani secara otomatis

  .radix-dropdown {  
    transform-origin: var(--radix-popover-content-transform-origin);  
  }  
  

Menggunakan easing yang tepat

• Dibanding ease-in, ease-in-out dalam kebanyakan kasus memberikan kurva akselerasi dan deselerasi yang lebih alami
• Terutama saat elemen yang sudah ada di layar bergerak, gerakan yang realistis seperti mobil yang mulai berjalan dan berhenti menjadi penting
• Nilai bawaan yang direkomendasikan adalah ease-out, dan detailnya bisa dilihat di tautan terpisah

Menggunakan kurva easing kustom

• Easing bawaan CSS (ease-in, ease-out) kurang ekspresif, sehingga kesan nyatanya lemah
• ease cocok untuk efek hover sederhana, tetapi sebagian besar gerakan memerlukan easing kustom
• Sumber daya yang direkomendasikan:
  • easing.dev
  • easings.co

Interaksi berbasis pegas

• Jika elemen langsung merespons posisi mouse, hasilnya bisa terasa artifisial
• Dengan memanfaatkan useSpring dari Framer Motion, perubahan nilai diterapkan secara bertahap seperti pegas, sehingga menghasilkan gerakan yang lebih realistis dan halus
• Ini sangat efektif terutama untuk animasi dekoratif, meski pada UI yang fungsional bisa ada pengecualian

Memahami alat

• Contoh: saat berpindah tab, warna teks dan bilah highlight harus berpindah bersama secara alami
• Untuk itu, pemanfaatan clip-path dan semacamnya perlu dilakukan dengan tepat agar animasinya tidak terasa janggal
• Pemeriksaan per frame atau pemutaran gerak lambat dapat membantu mengidentifikasi perbedaan yang halus
• Dengan transformasi CSS 3D, implementasi kreatif seperti efek orbit dan animasi loading 3D juga dimungkinkan

Mengapa ini penting?

• Saat ini, sebagian besar perangkat lunak sudah cukup baik secara fungsional
• Untuk menghadirkan pengalaman yang berbeda, UI yang terasa enak digunakan—dan animasi sebagai inti dari itu—menjadi hal yang penting
• Pemahaman tentang kapan, bagaimana, dan mengapa animasi diterapkan sangat memengaruhi kualitas produk
• Untuk pembahasan yang lebih mendalam, lihat kursus Animations on the Web

[rhrnakrnakr]

Judul dan isinya tidak cocok. Tertipu.

[ndrgrd]

Animasinya memang bagus, tapi terlalu banyak bagian yang membuat perhatian tertuju ke animasinya, bukan ke isinya.

Terutama kalau sampai alur membaca terganggu karena animasinya, rasanya sudah kesal duluan bahkan sebelum mulai membaca.