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

import { motion } from "framer-motion";
 
export default function BasicBox() {
  return (
    <motion.div
      className="w-40 h-40 bg-red-500 rounded-lg"
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.8 }}
    />
  );
}

import { motion } from "framer-motion";
 
export default function KeyframeBox() {
  return (
    <motion.div
      className="w-40 h-40 bg-blue-500"
      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 AnimatedButton() {
  return (
    <motion.button
      className="px-6 py-3 bg-gray-800 text-white rounded-lg font-semibold"
      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 DragBox() {
  return (
    <motion.div
      className="w-32 h-32 bg-green-500 rounded-lg"
      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.2 },
  },
};
 
const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 },
};
 
export default function StaggerList() {
  const items = ["Item 1", "Item 2", "Item 3"];
 
  return (
    <motion.ul
      className="list-none p-0"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item, i) => (
        <motion.li
          key={i}
          className="p-4 bg-indigo-500 my-2 rounded text-white"
          variants={itemVariants}
        >
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

import { motion, useScroll, useTransform } from "framer-motion";
 
export default function ScrollBox() {
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [0.5, 2]);
 
  return (
    <motion.div
      style={{ scale }}
      className="w-40 h-40 bg-pink-500 rounded-lg"
    />
  );
}

import React, { useEffect } from "react";
import { motion, useMotionValue, useTransform, animate } from "framer-motion";

const count = useMotionValue(0); // 0 থেকে শুরু
const roundedValue = useTransform(count, Math.round); // দশমিক → পূর্ণসংখ্যা

useEffect(() => {
  const animation = animate(count, 100, { duration: 2 }); // ২ সেকেন্ডে ১০০ পর্যন্ত
  return animation.stop; // Cleanup
}, []);

return (
  <div style={{ fontSize: "3rem", fontWeight: "bold" }}>
    <motion.div>{roundedValue}</motion.div>
  </div>
);

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

// src/components/ScrollReveal.jsx
import React from "react";
import { motion } from "framer-motion";
 
// বক্স কম্পোনেন্ট
const Box = ({ text }) => {
  return (
    <motion.div className="w-32 h-32 m-4 rounded-sm bg-pink-300 flex items-center justify-center">
      <span className="text-black text-xl">{text}</span>
    </motion.div>
  );
};
 
// মূল কম্পোনেন্ট
const ScrollReveal = () => {
  const greetings = ["Hello", "Holla", "Welcome", "Namaste", "Come In"];
 
  return (
    <div className="flex flex-col items-center py-10">
      {greetings.map((greeting, index) => (
        <Box key={index} text={greeting} />
      ))}
    </div>
  );
};
 
export default ScrollReveal;

const Box = ({ text }) => {
  return (
    <motion.div
      className="w-32 h-32 m-4 rounded-sm bg-pink-300 flex items-center justify-center"
      initial={{ opacity: 0, x: -50 }} // শুরুর অবস্থা
      whileInView={{ opacity: 1, x: 0 }} // ভিউপোর্টে এলে অবস্থা
      transition={{ duration: 1 }} // সময়কাল
    >
      <span className="text-black text-xl">{text}</span>
    </motion.div>
  );
};

const Box = ({ text }) => {
  return (
    <motion.div
      className="w-32 h-32 m-4 rounded-sm bg-pink-300 flex items-center justify-center"
      initial={{ opacity: 0, x: -50 }}
      whileInView={{ opacity: 1, x: 0 }}
      transition={{ duration: 1 }}
      viewport={{ once: true }}
    >
      <span className="text-black text-xl">{text}</span>
    </motion.div>
  );
};

// src/components/ScrollReveal.jsx
import React from "react";
import { motion } from "framer-motion";
 
const Box = ({ text }) => {
  return (
    <motion.div
      className="w-32 h-32 m-4 rounded-sm bg-pink-300 flex items-center justify-center"
      initial={{ opacity: 0, x: -50 }}
      whileInView={{ opacity: 1, x: 0 }}
      transition={{ duration: 1 }}
      viewport={{ once: true }}
    >
      <span className="text-black text-xl">{text}</span>
    </motion.div>
  );
};
 
const ScrollReveal = () => {
  const greetings = ["Hello", "Holla", "Welcome", "Namaste", "Come In"];
 
  return (
    <div className="flex flex-col items-center py-10">
      {greetings.map((greeting, index) => (
        <Box key={index} text={greeting} />
      ))}
    </div>
  );
};
 
export default ScrollReveal;

// প্যারেন্টের জন্য Variants
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2, // প্রতিটি চাইল্ডের মধ্যে ০.২ সেকেন্ড
    },
  },
};
 
// চাইল্ডের জন্য Variants
const itemVariants = {
  hidden: { y: 20, opacity: 0 }, // নিচে এবং অদৃশ্য
  visible: { y: 0, opacity: 1 }, // উপরে উঠে দৃশ্যমান
};

import React from "react";
import { motion } from "framer-motion";
 
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.2 },
  },
};
 
const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 },
};
 
export default function StaggeredList() {
  const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
 
  return (
    <motion.ul
      className="list-none p-0 m-0"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item, i) => (
        <motion.li
          key={i}
          className="bg-purple-500 text-white p-4 my-2 rounded"
          variants={itemVariants}
        >
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// App.js
import { Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
 
function App() {
  const location = useLocation();
 
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route index element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </AnimatePresence>
  );
}
 
export default App;

// HomePage.jsx
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
 
const pageVariants = {
  initial: { opacity: 0, x: "-100vw" }, // শুরুতে বাম দিকে বাইরে
  animate: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 50 } },
  exit: { opacity: 0, x: "100vw", transition: { ease: "easeInOut" } }, // ডান দিকে সরে বিদায়
};
 
const HomePage = () => {
  return (
    <motion.div
      variants={pageVariants}
      initial="initial"
      animate="animate"
      exit="exit"
      style={{ position: "absolute", width: "100%" }}
    >
      <h1>Home Page</h1>
      <Link to="/about">Go to About</Link>
    </motion.div>
  );
};
 
export default HomePage;