Framer Motion: React-এ স্মুথ অ্যানিমেশন খুব সহজে 🚀

npm install framer-motion
# অথবা
yarn add framer-motion

import { motion } from "framer-motion";
 
export default function BasicAnimation() {
  return (
    <motion.div
      style={{
        width: 160,
        height: 160,
        background: "#ef4444",
        borderRadius: 12,
      }}
      initial={{ opacity: 0, scale: 0.5 }} // শুরু অবস্থা
      animate={{ opacity: 1, scale: 1 }} // শেষ অবস্থা
      transition={{ duration: 0.8 }} // কত সময় লাগবে
    />
  );
}

import { motion } from "framer-motion";
 
export default function KeyframeAnimation() {
  return (
    <motion.div
      style={{
        width: 160,
        height: 160,
        background: "#3b82f6",
        borderRadius: 12,
      }}
      animate={{
        scale: [1, 1.5, 1, 1.5, 1],
        rotate: [0, 90, 0, -90, 0],
        borderRadius: ["20%", "50%", "20%", "50%", "20%"],
      }}
      transition={{
        duration: 2,
        ease: "easeInOut",
        times: [0, 0.25, 0.5, 0.75, 1],
        repeat: Infinity,
        repeatDelay: 1,
      }}
    />
  );
}

import { motion } from "framer-motion";
 
export default function GestureAnimation() {
  return (
    <motion.button
      style={{
        padding: "16px 32px",
        background: "#111827",
        color: "#fff",
        borderRadius: 8,
        fontWeight: "bold",
        border: "none",
        fontSize: 18,
      }}
      whileHover={{ scale: 1.1, rotate: 3 }}
      whileTap={{ scale: 0.9, rotate: -3 }}
      transition={{ type: "spring", stiffness: 300 }}
    >
      Click Me
    </motion.button>
  );
}

import { motion } from "framer-motion";
 
export default function DragExample() {
  return (
    <motion.div
      style={{
        width: 128,
        height: 128,
        background: "#22c55e",
        borderRadius: 12,
      }}
      drag
      dragConstraints={{ top: -50, left: -50, right: 50, bottom: 50 }}
    />
  );
}

import { motion } from "framer-motion";
 
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.3 },
  },
};
 
const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 },
};
 
export default function StaggerList() {
  const items = ["প্রথম", "দ্বিতীয়", "তৃতীয়"];
 
  return (
    <motion.ul
      style={{ listStyle: "none", padding: 0 }}
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item, index) => (
        <motion.li
          key={index}
          style={{
            padding: 16,
            background: "#6366f1",
            margin: "8px 0",
            borderRadius: 8,
            color: "#fff",
          }}
          variants={itemVariants}
        >
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

import { motion, useScroll, useTransform } from "framer-motion";
 
export default function ScrollAnimation() {
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [0.5, 2]);
 
  return (
    <motion.div
      style={{
        scale,
        width: 160,
        height: 160,
        background: "#ec4899",
        borderRadius: 12,
      }}
    />
  );
}

import React, { useEffect } from "react";
import { motion, useMotionValue, useTransform, animate } from "framer-motion";
 
export default function Counter() {
  const count = useMotionValue(0);
  const rounded = useTransform(count, Math.round);
 
  useEffect(() => {
    const animation = animate(count, 100, { duration: 2 });
    return animation.stop;
  }, []);
 
  return (
    <div style={{ fontSize: 40, fontWeight: "bold" }}>
      <motion.span>{rounded}</motion.span>
    </div>
  );
}

import React from "react";
import { motion } from "framer-motion";
 
const Box = ({ text }) => (
  <motion.div
    style={{
      width: 128,
      height: 128,
      margin: 16,
      borderRadius: 8,
      background: "#f9a8d4",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    }}
    initial={{ opacity: 0, x: -50 }}
    whileInView={{ opacity: 1, x: 0 }}
    transition={{ duration: 1 }}
    viewport={{ once: true }}
  >
    <span style={{ color: "#111", fontSize: 20 }}>{text}</span>
  </motion.div>
);
 
export default function ScrollReveal() {
  const items = ["হ্যালো", "আসসালামু আলাইকুম", "স্বাগতম", "শুভেচ্ছা", "আসুন"];
 
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        padding: 40,
      }}
    >
      {items.map((item, i) => (
        <Box key={i} text={item} />
      ))}
    </div>
  );
}

import { motion } from "framer-motion";
 
export default function SpringAnimation() {
  return (
    <motion.div
      style={{
        width: 160,
        height: 160,
        background: "#f59e0b",
        borderRadius: 12,
      }}
      animate={{
        y: [0, -100, 0],
        rotate: [0, 180, 360],
      }}
      transition={{
        duration: 2,
        ease: "easeInOut",
        repeat: Infinity,
        repeatType: "reverse",
        type: "spring",
        stiffness: 100,
        damping: 10,
      }}
    />
  );
}

import { motion } from "framer-motion";
 
export default function PathAnimation() {
  return (
    <svg width="200" height="200" viewBox="0 0 200 200">
      <motion.path
        d="M 50 100 Q 100 50 150 100 T 250 100"
        stroke="#8b5cf6"
        strokeWidth="4"
        fill="none"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
      <motion.circle
        cx="50"
        cy="100"
        r="8"
        fill="#8b5cf6"
        initial={{ pathOffset: 0 }}
        animate={{ pathOffset: 1 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
    </svg>
  );
}