Documentation | Framer for Developers
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
- Transform 사용 시 쓰는 속성명
- 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>
);
}
'Frontend > - Framer motion' 카테고리의 다른 글
Framer motion : Motion Value에 대해서 (1) | 2024.10.06 |
---|---|
Framer motion : scroll Animation에 대하여 (0) | 2024.09.28 |
Framer motion : Layout Animation에 대해 알아보자 (0) | 2024.09.28 |
Framer motion : 제스처(Gestures)에 대해서 (2) drag, pan (0) | 2024.09.28 |
Framer motion : 제스처(Gestures)에 대해서 (1) hover, focus, tap (1) | 2024.09.28 |
Framer motion : variants에 대해서 (0) | 2024.09.24 |
Framer motion: keyframes에 대해 알아보자 (0) | 2024.09.24 |
Framer motion : Transition 속성 종류에 대해 알아보자 (0) | 2024.09.24 |