Animasi dengan Framer Motion

Animasi dengan Framer Motion

Framer Motion adalah library animasi untuk React yang powerful namun mudah digunakan. Dengan Framer Motion, kita bisa menambahkan animasi yang halus dan profesional hanya dengan beberapa baris kode.

Instalasi

npm install framer-motion

Animasi Dasar

import { motion } from "framer-motion";

function FadeIn() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Konten yang muncul dengan fade-in
    </motion.div>
  );
}

Animasi Hover & Tap

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  className="btn-primary"
>
  Klik Aku
</motion.button>

Variants — Animasi Terstruktur

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 }
};

function AnimatedList({ items }) {
  return (
    <motion.ul variants={containerVariants} initial="hidden" animate="visible">
      {items.map(item => (
        <motion.li key={item.id} variants={itemVariants}>
          {item.name}
        </motion.li>
      ))}
    </motion.ul>
  );
}