Selanjutnya, mari kita bahas beberapa fitur tambahan yang lebih lanjut dalam Framer Motion, seperti *keyframes*, *exit animations*, dan animasi kompleks lainnya. Fitur-fitur ini akan membantu memperkaya interaksi aplikasi Anda.
### 1. Keyframes Animations
Keyframes memungkinkan kita menentukan beberapa titik atau *step* dalam animasi. Ini berguna jika kita ingin elemen bergerak melalui beberapa titik sebelum mencapai titik akhirnya.
Contoh animasi menggunakan keyframes:
```jsx
import { motion } from "framer-motion";
function KeyframeAnimation() {
return (
<motion.div
animate={{
x: [0, 100, -100, 0], // Pergerakan elemen melalui beberapa titik di sumbu X
opacity: [1, 0.5, 0.5, 1], // Variasi opacity di setiap titik
}}
transition={{ duration: 2 }}
style={{ width: 100, height: 100, backgroundColor: "blue" }}
/>
);
}
export default KeyframeAnimation;
Pada contoh ini:
- Properti `x` dan `opacity` berisi array yang menggambarkan titik-titik yang akan dilewati animasi.
- Elemen akan bergerak maju-mundur di sumbu X dengan opacity yang berubah di setiap titik.
Dengan `keyframes`, kita bisa membuat animasi kompleks dengan lebih fleksibel.
### 2. Exit Animations
Framer Motion memiliki animasi `exit`, yang bisa dipicu saat elemen dihapus dari DOM. Animasi `exit` sangat cocok untuk transisi, misalnya saat mengganti halaman atau menyembunyikan elemen dari tampilan.
Contoh penggunaan `exit`:
```jsx
import { motion } from "framer-motion";
import { useState } from "react";
function ExitAnimation() {
const [isVisible, setIsVisible] = useState(true);
return (
<>
<button onClick={() => setIsVisible(!isVisible)}>Toggle Box</button>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, x: -100 }}
transition={{ duration: 0.5 }}
style={{ width: 100, height: 100, backgroundColor: "purple" }}
/>
)}
</>
);
}
export default ExitAnimation;
Dalam contoh di atas:
- Tombol "Toggle Box" digunakan untuk mengubah state `isVisible`.
- Saat elemen dihapus, `exit={{ opacity: 0, x: -100 }}` membuat animasi hilang ke kiri layar dengan mengurangi opacity.
Untuk menggunakan animasi `exit`, pastikan bahwa komponen Anda dibungkus dengan `<AnimatePresence>` dari Framer Motion:
```jsx
import { AnimatePresence } from "framer-motion";
...
<AnimatePresence>
{isVisible && (
<motion.div ... />
)}
</AnimatePresence>
### 3. Transition Timing and Easing
Framer Motion mendukung berbagai tipe easing dan pengaturan waktu untuk animasi. Anda bisa menyesuaikan kecepatan, jenis easing, atau bahkan menambahkan efek *bounce* atau *spring*.
#### Contoh Penggunaan Easing
```jsx
<motion.div
animate={{ x: 200 }}
transition={{
duration: 1,
ease: "easeInOut", // Pilihan lain: "easeIn", "easeOut", "linear"
}}
style={{ width: 100, height: 100, backgroundColor: "orange" }}
/>
#### Spring Animation
Efek *spring* memberi elemen animasi yang lebih dinamis, seperti ada efek "bounce" ketika mencapai titik akhir.
```jsx
<motion.div
animate={{ x: 200 }}
transition={{
type: "spring",
stiffness: 100, // Semakin tinggi stiffness, semakin cepat animasi
damping: 10, // Semakin tinggi damping, semakin sedikit bounce
}}
style={{ width: 100, height: 100, backgroundColor: "yellow" }}
/>
### 4. Complex Animations with Variants
Dengan `variants`, Anda dapat membuat animasi kompleks untuk beberapa elemen sekaligus. Misalnya, kita bisa mengatur elemen-elemen muncul dalam urutan tertentu.
Contoh:
```jsx
import { motion } from "framer-motion";
const listVariants = {
visible: { opacity: 1, transition: { staggerChildren: 0.3 } },
hidden: { opacity: 0 },
};
const itemVariants = {
visible: { opacity: 1, x: 0 },
hidden: { opacity: 0, x: -100 },
};
function ComplexAnimation() {
return (
<motion.ul variants={listVariants} initial="hidden" animate="visible">
{[1, 2, 3].map((item) => (
<motion.li
key={item}
variants={itemVariants}
style={{ listStyle: "none", marginBottom: 10, backgroundColor: "lightblue", padding: 10 }}
>
Item {item}
</motion.li>
))}
</motion.ul>
);
}
export default ComplexAnimation;
Penjelasan:
- `staggerChildren: 0.3` memberi jeda 0,3 detik di antara animasi masing-masing anak.
- Elemen `li` muncul secara bertahap dari kiri ke kanan.
### Kesimpulan
Dengan memanfaatkan keyframes, exit animations, transition timing, dan variants, Anda bisa membuat animasi yang lebih menarik dan interaktif di aplikasi React. Teknik ini memperkaya pengalaman pengguna dan menambah estetika UI, menjadikannya lebih profesional.