Framer-motion 라이브러리(기본)

 

내손으로는 css들이 뚝딱거리기에 라이브러리를 찾다가 Framer-motion 이 직관적이고 예제도 많아서 찍먹이라도 해보자 생각하고 글을 정리 보려고한다ㅎㅎ

 

 

설치하기

npm i framer-motion

 

 

 

HTML 태그 앞에 motion 키워드를 붙여사용하며 motion키워드가 붙은 요소를 motion component라고 한다

import { motion } from "framer-motion"


<motion.div
    initial={{ 
      x: 0,
      rotate: 45,
    }}
		animate={{ 
      x: 50,
      rotate: 270,
    }}
		transition={{ 
      ease: "easeIn",
      duration: 0.7,
    }}
          exit={{ opacity: 0 }}
  />

 

 

자주쓰는 속성들

• initial:애니메이션의 초기 상태를 정의, 컴포넌트가 처음 렌더링 될 때 적용되는 상태
• animate:애니메이션을 시작하고 중간에 변화하는 상태를 정의
• exit:애니메이션의 종료 상태를 정의, 요소가 화면에 사라질 때 적용되는 상태
• transition:애니메이션 지속 시간 및 이징 함수등의 정의
• whileHover,whileTap등 이벤트 상태:요소가 특정 이벤트에 대응할 때의 애니메이션 상태를 정의
• variant:여러 상태를 하나의 객체로 그룹화하여 다양한 상황에 따라 애니메이션을 정의
• exitBeforePresence:컴포넌트에서 사용되며 이전 애니메이션이 끝나기 전에 새로운 애니메이션을 시작하도록 설정
• type:애니메이션 타입을 설정한다 주로 사용되는 타입은 Tween, Spring, Inertiaspring 등
  Spring 타입 및 stiffness 설정=>stiffness 속성을 추가하여 스프링의 강도를 조절
• yoyo:변경 사항을 여러번 반복할 수 있다,숫자를 입력하면 해당 횟수 만큼 반복되며,, Infinity를 입력하면 무한대로 반복

 

📌예제

import { motion } from "framer-motion";

// 애니메이션 상태 정의
const boxVariants = {
  initial: { opacity: 0, x: -100 }, // 초기 상태
  animate: { opacity: 1, x: 0 },    // 애니메이션 진행 중 상태
  exit: { opacity: 0, x: 100 }      // 애니메이션 종료 상태
};

// 애니메이션 지속 시간 및 이징 함수 정의
const transition = { duration: 0.5, ease: "easeInOut" };

const MyComponent = () => {
  return (
    <motion.div
      variants={boxVariants}         // 애니메이션 상태 객체 적용
      initial="initial"               // 초기 상태 설정
      animate="animate"               // 애니메이션 진행 중 상태 설정
      exit="exit"                     // 애니메이션 종료 상태 설정
      transition={transition}         // 애니메이션 지속 시간 및 이징 함수 설정
      whileHover={{ scale: 1.2 }}     // Hover 시 애니메이션 적용
      exitBeforeEnter                 // exitBeforePresence 설정
    >
    //Spring 속성
    <motion.div
      initial={{ opacity: 0, y: -100 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 120 }}
    >
    </motion.div>
    // yoyo 속성
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ yoyo: Infinity, duration: 1 }}
    >
    </motion.div>
    </motion.div>
  );
};

• staggerChildren:부모 컨테이너의 자식 요소들 간의 애니메이션을 시간에 따라 차례대로 발생하도록 지정할 수 있는 속성이다

const containerVariants = {
  initial: {},
  animate: {
    transition: {
      staggerChildren: 0.2, // 자식 요소들 간의 애니메이션 간격 (초 단위)
    },
  },
};

const childVariants = {
  initial: { opacity: 0, y: -50 },
  animate: { opacity: 1, y: 0 },
};

const MyComponent = () => {
  return (
    <motion.div
      variants={containerVariants}
      initial="initial"
      animate="animate"
    >
      <motion.div variants={childVariants}>
        {/* 첫 번째 자식 요소 */}
        컴포넌트 1
      </motion.div>
      <motion.div variants={childVariants}>
        {/* 두 번째 자식 요소 */}
        컴포넌트 2
      </motion.div>
      <motion.div variants={childVariants}>
        {/* 세 번째 자식 요소 */}
        컴포넌트 3
      </motion.div>
    </motion.div>
  );
};

=> 각 자식 요소가 0.2초 간격으로 차례로 나타나도록 설정

 

useAnimate

motion 컴포넌트와 그안에 포함된 속성들을 사용하여 애니메이션을 제어할수 있게 해준다

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

function Component({ children }) {
  const scope = useRef(null);
  const animate = useAnimation();

  useEffect(() => {
    //"li" 선택자는 `scope`를 받는 엘리먼트의 자식들만 선택
    animate("li", { opacity: 1 });
  }, [animate]);

  return <ul ref={scope}>{children}</ul>;
}

 

Layout Props

layout이 변할 때 그 모습을 부드럽게 이어준다

• 리스트의 순서가 바뀌었을 때
• width 나 position이 변했을 때
• 부모의 레이아웃이 변할 때 ( flex 혹은 grid 로 변할 때)
• 이외의 컴포넌트의 레이아웃이 변할 때

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

const WidthChangeExample = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleWidth = () => {
    setIsExpanded((prev) => !prev);
  };

  return (
    <div>
      <button onClick={toggleWidth}>너비 토글</button>
      <motion.div
        layout
        style={{
          width: isExpanded ? 300 : 100,
          height: 100,
          background: "blue",
        }}
      >
        내용
      </motion.div>
    </div>
  );
};

 

 

 

이외에도 엄청 많은데 잘만화면 멋진 효과를 기대할수 있을꺼 같다