Framer-motion 애니메이션 몇개 메모

<motion.태그(ex. div, p) 로 시작

 

속성들

initial={{opacity: 0, y: -100}}	처음엔 안보이고(opacity : 0) 화면 위쪽에서 시작(y:-100)
initial={{opacity: 0, y: 100}}	처음엔 안보이고(opacity : 0) 화면 아래에서 시작(y:100)
initial={{opacity: 0, x: -100}}	처음엔 안보이고(opacity : 0) 화면 왼쪽에서 시작(x:-100)
animate={{opacity:1, y:0 또는 x:0}}	완전히 보이고(opacity:1) 원래 위치로 이동(y:0 또는 x:0)
whileInView={{ opacity: 1, y: 0 }}	화면에 요소가 보일 때 애니메이션 실행
exit={{ opacity: 0, y: -100 }}	컴포넌트 사라질 때 위로 사라지는 애니메이션
viewport={{ once: false, amount: 0.2 }}	요소가 화면에 20%(amount:0.2) 보일때마다 실행(once:false)
transition={{ duration: 0.4, ease: "easeInOut" }}	애니메이션 실행 시간(duration:0.4s) 속도 곡선 ease

 

 

ease 속성들

linear	일정하게	대부분 안씀
easeIn	처음 느리고, 점점 빠르게(진입할 때 빠르게 도착)
easeOut	처음 빠르고, 끝이 느림(자연스럽게 멈추는 효과)	UI에서 매우 많이 쓰임
easeInOut**	시작 부드럽게, 중간 빠르게, 끝 부드럽게 ( 자연스럽고 차분한 효과)	가장 많이 씀
anticipate	시작 살짝 반대 방향으로 튕기고 나서 본 방향으로 이동
circIn, circOut, circInOut	원으로 움직임	깊이감, 입체감 표현
backIn, backOut, backInOut	튀어나오는 애니메이션	Modal 등장, 버튼
bounce, bounceIn, bounceOut	튕기는 애니메이션	캐주얼 UI, 카드 등장

 

>

   {content}

</motion.태그>