𝗠𝗼𝘁𝗶𝗼𝗻 𝗱𝗶 𝗣𝗿𝗼𝗱𝘂𝗸𝘀𝗶: 𝗔𝗻𝗶𝗺𝗮𝘀𝗶 𝗹𝗮𝘆𝗼𝘂𝘁 𝗱𝗮𝗻 𝗽𝗮𝘁𝘁𝗲𝗿𝗻 𝗮𝗸𝘀𝗲𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝗮𝘀
Framer-motion telah berubah. Sejak akhir 2024, paket ini sekarang disebut Motion. Anda harus menggunakan jalur impor motion/react.
Sebagian besar tutorial sudah usang. Mereka masih menampilkan impor lama dan kurang memperhatikan aksesibilitas. Panduan ini membantu Anda menggunakan Motion modern dalam proyek nyata.
𝗣𝗲𝗺𝗯𝗮𝗿𝘂𝗮𝗻
Transisinya sederhana. Jika Anda menggunakan versi 11, versi 12 hanyalah tugas cari-dan-ganti (find-and-replace).
- Uninstall:
npm uninstall framer-motion - Install:
npm install motion - Perbarui impor: Ubah 'framer-motion' menjadi 'motion/react'
Anda dapat menjalankan kedua paket secara bersamaan selama migrasi. Jangan biarkan keduanya tetap ada di codebase Anda selamanya.
𝗔𝗻𝗶𝗺𝗮𝘀𝗶 𝗟𝗮𝘆𝗼𝘂𝘁
Prop layout memberi tahu Motion untuk memantau ukuran dan posisi sebuah elemen. Ia menganimasikan perubahan alih-alih membiarkan browser berpindah ke posisi baru secara tiba-tiba (snap).
Gunakan layout="position" untuk daftar. Ini akan menggerakkan elemen saudara (siblings) saat sebuah item membesar, tetapi tidak akan menekan konten di dalamnya.
Gunakan AnimatePresence untuk proses mounting dan unmounting. Tanpanya, React akan menghapus elemen dari DOM sebelum elemen tersebut sempat menganimasikan proses keluarnya (animate out).
Hindari menganimasikan height: auto. Hal ini menyebabkan gangguan visual. Sebagai gantinya, gunakan pembungkus CSS grid (0fr ke 1fr) untuk perubahan tinggi yang mulus.
𝗔𝗸𝘀𝗲𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝗮𝘀
Sekitar 30% pengguna iOS mengaktifkan prefers-reduced-motion. Jangan hanya mematikan semua animasi. Ini akan merusak tata letak (layout) Anda.
Cara yang salah: Ganti <motion.div> dengan <div> biasa jika pengguna menginginkan gerakan yang lebih sedikit. Ini menyebabkan layout berpindah secara tiba-tiba (snap) dan terasa rusak.
Cara yang benar: Batasi transisinya, bukan komponennya. Tetap gunakan <motion.div> tetapi atur durasinya menjadi 0.
Buat custom hook untuk mengelola hal ini:
- Gunakan hook
useReducedMotion. - Jika
true, kembalikan durasi 0. - Jika
false, kembalikan pengaturan spring standar Anda.
Ini memastikan elemen tetap mencapai posisi yang benar tanpa adanya gerakan.
𝗞𝗮𝗽𝗮𝗻 𝗺𝗲𝗻𝗴𝗴𝘂𝗻𝗮𝗸𝗮𝗻 𝗠𝗼𝘁𝗶𝗼𝗻
Gunakan Web Animations API browser untuk efek fade sederhana. Ini tidak memiliki dependensi sama sekali.
Gunakan Motion saat Anda membutuhkan:
- API React-native yang memahami lifecycle komponen.
- Animasi layout yang melacak perubahan DOM.
AnimatePresenceuntuk animasi keluar (exit animations).- Fisika spring yang terasa alami.