Framer Motion adalah pustaka animasi untuk React yang mempermudah pembuatan animasi dengan performa tinggi dan elegan. Framer Motion sangat populer karena intuitif, mudah digunakan, dan memiliki fitur canggih yang memungkinkan pengembang front-end membuat interaksi dinamis tanpa memerlukan konfigurasi yang rumit.
### Pengenalan Animasi Dasar dengan Framer Motion
Untuk memulai dengan Framer Motion, pertama-tama kita harus menginstalnya ke dalam proyek React Anda:
```bash
npm install framer-motion
Setelah terinstal, kita bisa langsung menggunakan komponen `motion` yang disediakan oleh Framer Motion. Komponen `motion` adalah versi dari elemen HTML standar yang dilengkapi dengan kemampuan animasi.
#### Contoh Animasi Sederhana
Misalnya, kita ingin membuat animasi untuk sebuah div yang bergerak dari kiri ke kanan saat muncul di layar. Ini bisa dilakukan dengan sangat mudah menggunakan `motion.div` dan properti `animate`.
Berikut contoh kode dasar:
```jsx
import { motion } from "framer-motion";
function BasicAnimation() {
return (
<motion.div
animate={{ x: 100 }} // Animasi pergerakan sejauh 100px pada sumbu X
initial={{ x: 0 }} // Posisi awal di 0px pada sumbu X
transition={{ duration: 1 }} // Durasi animasi 1 detik
style={{ width: 100, height: 100, backgroundColor: "blue" }}
/>
);
}
export default BasicAnimation;
Pada contoh di atas:
- `animate` menentukan properti CSS yang ingin kita animasikan (misalnya, `x` untuk posisi horizontal).
- `initial` mengatur kondisi awal elemen sebelum animasi dimulai.
- `transition` mengontrol aspek-aspek animasi seperti durasi, jenis easing, dan lain-lain.
#### Hover dan Tap Animations
Framer Motion juga mendukung animasi interaktif yang dapat dipicu dengan aksi pengguna seperti hover atau tap. Berikut contoh animasi hover di mana elemen berubah ukuran ketika pengguna mengarahkan kursor:
```jsx
import { motion } from "framer-motion";
function HoverAnimation() {
return (
<motion.div
whileHover={{ scale: 1.2 }} // Saat hover, elemen akan membesar 1.2 kali
style={{ width: 100, height: 100, backgroundColor: "red" }}
/>
);
}
export default HoverAnimation;
Untuk animasi tap (ketika elemen disentuh atau diklik), cukup gunakan `whileTap`:
```jsx
<motion.div
whileTap={{ scale: 0.8 }} // Ketika tap, elemen akan mengecil menjadi 0.8 kali
style={{ width: 100, height: 100, backgroundColor: "green" }}
/>
Ini memberikan interaktivitas dasar yang dapat membuat UI terasa lebih responsif dan hidup.
### Variants: Cara Efisien Mengelola Animasi
`Variants` adalah fitur yang sangat kuat dalam Framer Motion yang memungkinkan Anda mendefinisikan kumpulan animasi dan menerapkannya ke beberapa elemen secara efisien. Anda bisa mendefinisikan berbagai "state" dan menyambungkannya ke elemen.
Contoh penggunaan `variants`:
```jsx
import { motion } from "framer-motion";
const boxVariants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
};
function VariantAnimation() {
return (
<motion.div
variants={boxVariants}
initial="hidden"
animate="visible"
style={{ width: 100, height: 100, backgroundColor: "purple" }}
/>
);
}
export default VariantAnimation;
Pada contoh ini:
- `hidden` adalah state awal di mana kotak tidak terlihat (opacity 0) dan diposisikan di luar layar (x: -100).
- `visible` adalah state ketika animasi berjalan, membuat kotak muncul ke posisi semula dan terlihat.
Dengan `variants`, kita dapat mengontrol animasi yang kompleks dengan lebih terorganisir.
### Kesimpulan
Framer Motion membuat animasi pada React menjadi lebih mudah, cepat, dan menyenangkan. Dengan dasar-dasar seperti `animate`, `transition`, `whileHover`, `whileTap`, dan `variants`, Anda dapat mulai membangun animasi interaktif untuk memperkaya pengalaman pengguna di aplikasi web Anda.
Langkah selanjutnya, kita dapat memperdalam materi ini dengan membahas tentang keyframes, exit animations, serta cara membuat animasi yang lebih kompleks!