Menguasai Framer Motion: Animasi Interaktif dan Smooth di React

Mengapa Animasi Penting dalam UI/UX?

Animasi antarmuka (micro-interactions) yang halus memberikan respons visual yang memuaskan saat pengguna berinteraksi dengan elemen web. Framer Motion adalah pustaka animasi paling populer untuk React yang mempermudah pembuatan animasi kompleks berbasis physics spring.

---

1. Dasar Komponen motion

Untuk menganimasikan elemen HTML standar, cukup ubah tag menjadi motion.<tag>:

import { motion } from 'framer-motion';

export function HeroButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
      className="bg-indigo-600 text-white px-6 py-3 rounded-xl font-bold"
    >
      Jelajahi Portofolio
    </motion.button>
  );
}

---

2. Animasi Unmount dengan AnimatePresence

Secara bawaan di React, saat komponen di-unmount, elemen tersebut langsung menghilang dari DOM tanpa animasi keluar. AnimatePresence menyelesaikan masalah ini:

import { motion, AnimatePresence } from 'framer-motion';

export function Modal({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9 }}
          transition={{ duration: 0.2 }}
          className="modal-overlay"
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

---

3. Layout Animations dengan Prop layout

Framer Motion secara otomatis mengukur posisi awal dan akhir elemen HTML saat ukuran atau posisinya berubah di tata letak (FLIP animation technique):

<motion.div layout className="card">
  {isExpanded && <p>Deskripsi tambahan yang menggeser tata letak...</p>}
</motion.div>

---

Kesimpulan

Mikro-animasi yang dirancang dengan halus meningkatkan daya tarik antarmuka secara drastis dan membuat pengalaman pengguna terasa sangat premium.