본문 바로가기
Frontend/- Framer motion

Framer Motion 시작하기

by 코딩쥐 2024. 9. 24.

Documentation | Framer for Developers

 

Documentation | Framer for Developers

An open source, production-ready motion library for React on the web.

www.framer.com

 

Framer Motion은 React에서 애니메이션과 상호작용을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 위의 사이트에서 다양한 예제를 확인할 수 있다. 

 

Framer Motion 시작하기 

Framer motion을 사용하기 위해서 우선 설치가 필요하다.

npm install framer-motion --save

 

1. framer-motion 에서 motion을 받아온다.

import { motion } from "framer-motion"

 

2. motion 모듈을 사용하여 태그를 생성한다.

  • <motion.태그명/>
import { motion } from "framer-motion";

export default function Comp01() {
    return(
        <motion.div>
            Framer Motion 예제
        </motion.div>
    );
}

 

3. 애니메이션을 적용한다. 

애니메이션에는 모든 css 속성을 사용할 수 있으며 속성명 사용 시에 카멜케이스를 사용한다. transition의 경우에는 css 속성 중 transition과 관련된 별도의 속성이 사용된다. css 속성의 값으로는 숫자, 숫자를 포함하는 문자열("0vh", "10px" 등), 색상(Hex, RGB, HSLA), 복잡문자열("#000", "10px 0" 등)을 사용할 수 있다.

  • initial(선택사항) : 요소의 초기 상태를 설정한다.
  • animate : 요소의 애니메이션 상태를 설정한다. 
    • Transform 사용 시 쓰는 속성명
      - translate: x, y, z, translateX, translateY, translateZ 
      - scale: scale, scaleX, scaleY
      - rotate: rotate, rotateX, rotateY, rotateZ
      - skew: skew, skewX, skewY
      - perspective: transformPerspective 
      - transform-origin: originX, originY, originZ
  • transition(선택사항) : 애니메이션의 전환 효과를 제어하는데 사용한다. 
import { motion } from "framer-motion";

export default function Comp01() {
    return (
        //처음엔 opacity 0, 5초동안 opacity 1으로 변경함
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 5 }}>
            Framer Motion 예제
        </motion.div>
    );
}