Buat lebih singkat dari yang Anda kira
- Satu transisi: 0,15~0,4 detik
- Percepat sampai terasa terlalu cepat, lalu kurangi sedikit demi sedikit
Sesuaikan aksi dengan kurva
- Gerakan itu subjektif seperti warna, tetapi sama pentingnya
- Pikirkan gerakan di dunia nyata dan bandingkan
Akselerasi dan deselerasi
- Jika animasi terasa tidak alami, biasanya karena mulai atau berhenti terlalu mendadak
- Walau tipis, sebaiknya tambahkan easing-in/out pada kurva cubic-bezier
- Agar terlihat lebih nyata, "inersia (inertia)" juga bagus
Lebih sedikit itu lebih baik
- Semakin banyak elemen berubah selama animasi, semakin besar risikonya terlihat berlebihan
- Jika opacity berubah dari 0 ke 1, coba 0,4 alih-alih 1. Jika mengubah ukuran, coba mulai dari ukuran yang hanya sedikit lebih kecil
- Dalam kebanyakan kasus, animasi yang bergerak ke posisi akhirnya sebaiknya hanya bergerak sekitar 5~40 piksel
Hindari nilai bawaan browser
- Browser memiliki kurva bawaan seperti linear, ease, ease-in, ease-out, ease-in-out
- Memang praktis dan berguna dalam situasi tertentu, tetapi terlalu umum sehingga semuanya terlihat mirip (seperti situs yang dibuat dengan Bootstrap/Tailwind yang terasa serupa)
- Coba gunakan nilai autocomplete untuk kurva cubic-bezier di VS Code
- Atau buka browser developer tools dan gunakan editor kurva
Banyak properti, banyak easing
- Ini tidak selalu berguna, tetapi saat beberapa properti harus diubah sekaligus (misalnya transform dan opacity bersamaan)
- Kadang terlihat baik jika memakai kurva cubic-bezier yang sama, tetapi sering kali tidak
- Kurva yang cocok untuk transform belum tentu cocok untuk fade
- Dalam kasus seperti ini, lebih baik memilih easing yang berbeda untuk tiap properti CSS
- Anda bisa memisahkan animasi @keyframes per properti, atau memilih beberapa transition
- untuk opacity gunakan linear, untuk transform gunakan cubic-bezier(.5, 0, .5, 1)
Gunakan delay yang dibuat selang-seling
- Saat melakukan transisi pada beberapa elemen, jangan meremehkan efek animation-delay atau transition-delay
In itu keluar, Out itu masuk
- Kurva easing ada tiga jenis
- ease in (mulai lambat)
- ease out (berakhir lambat)
- in-out (cepat di tengah, lambat di awal dan akhir)
- Bagian sulit dari transisi adalah, sering kali Anda justru ingin in memakai ease-out, dan out memakai ease-in
- Animasi ketika satu elemen keluar dan yang lain masuk terlihat sebagai satu transisi bagi pengguna, tetapi secara internal itu dua transisi
- Yang keluar ingin dibuat lambat, jadi butuh ease-in, dan yang masuk harus ease-out
Andalkan akselerasi hardware
- Tidak semua properti CSS berjalan mulus di semua perangkat dan browser
- Properti yang selalu bisa diakselerasi hardware
- transform (semua translate, scale, rotate, termasuk versi 3D)
- opacity
- Properti yang kadang bisa diakselerasi hardware
- beberapa properti SVG tertentu
- filter (tergantung browser dan filternya)
- Canvas dan WebGL juga mendapat akselerasi hardware, tetapi tidak dibahas di sini
- Jadi, untuk memindahkan, mengubah ukuran, atau memutar, selalu gunakan properti CSS
transform
- Apa pun yang Anda lakukan, jangan langsung mengubah ukuran atau posisi elemen
- Jika langsung mengubah properti yang memengaruhi layout halaman seperti height, width, border, margin, padding, ada risiko kecepatan halaman melambat secara nyata
Gunakan will-change saat diperlukan
- Secara teori animasi seharusnya halus dan performanya baik, tetapi jika masih terlihat tidak alami, gunakan properti will-change
- Ini memberi tahu lebih dulu apa yang akan berubah, sehingga perhitungan lain bisa dilewati
Bonus: hormati preferensi pengguna
- Pengguna bisa menentukan di pengaturan perangkat apakah mereka memilih "reduced motion"
- Dengan media query atau JavaScript, Anda bisa mendeteksi nilai ini dan merespons dengan tepat
Belum ada komentar.