[React] framer motion사용법

---

1.설치

npm install framer-motion

 

 

 

 

 

2.기본 사용법

motion컴포넌트로 감싸서 만듬

 

• initial: 시작 상태 (초기값)
• animate: 최종 도착 상태
• transition: 애니메이션 지속 시간, 타이밍

import { motion } from "framer-motion";

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, y: -50 }} // 시작 상태
      animate={{ opacity: 1, y: 0 }}   // 애니메이션 도착 상태
      transition={{ duration: 0.5 }}   // 전환 시간
    >
      안녕하세요! 👋
    </motion.div>
  );
}

 

 

 

2-1.initial, animate에 들어갈 수 있는 값

 

 

 

 

2-2.transition

 

 

 

 

 

 

 

 

3.Hover & Tap

<motion.button
  whileHover={{ scale: 1.1 }} // 마우스 올리면 커짐
  whileTap={{ scale: 0.9 }}   // 클릭 시 작아짐
  className="px-4 py-2 bg-blue-500 text-white rounded-md"
>
  클릭해보세요!
</motion.button>

 

 

 

 

4.Drag 

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  className="w-20 h-20 bg-red-500 rounded-full cursor-grab"
>
  드래그 가능!
</motion.div>

 

 

 

 

 

5.Animate Presence

컴포넌트 사라질때 애니메이션

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function ToggleBox() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="flex flex-col items-center space-y-4">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className="px-4 py-2 bg-blue-500 text-white rounded-md"
      >
        토글
      </button>

      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }} // 사라질 때 애니메이션
            transition={{ duration: 0.5 }}
            className="w-40 h-40 bg-green-500 rounded-md"
          />
        )}
      </AnimatePresence>
    </div>
  );
}

 

 

 

 

 

 

 

6.Scroll 애니메이션

import { motion, useInView } from "framer-motion";
import { useRef } from "react";

export default function ScrollFadeIn() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.5 }}
      className="w-60 h-40 bg-purple-500 text-white flex items-center justify-center rounded-md"
    >
      스크롤하면 나타남
    </motion.div>
  );
}