[TIL]240118_Framer-motion 사용해보기

👩🏻‍💻 Today Learn

• 최종프로젝트 중간발표 발제
• 메인페이지 css

🎨 Framer-motion으로 css 효과주기

우선 설치해주기

// npm
npm i framer-motion
// yarn
yarn add framer-motion

사용할 컴포넌트에서 import해주기

import { motion } from "framer-motion"

HTML 태그 앞에 motion 키워드를 붙여준다. 이렇게 motion 키워드가 붙은 요소를 motion component 라고 한다!

초기 상태를 initial 속성에 객체 형태로 넣고, 애니메이션 할 상태를 animate 속성에 객체 형태로 넣어주면 된다.

<motion.div
  initial={{ scale: 0 }} 
  animate={{ scale: 1, rotateZ: 360 }}
/>

그런데 이렇게 넣을 경우에는 처음 마운트 되었을때만 효과가 발생하였다.

나는 스크롤시에 변화되는 효과를 주고 싶었는데 찾아보니 whileInView 속성을 사용해주면 된다고 했다.

내가 사용한 예시

// 오른쪽에서 왼쪽으로 이동
<motion.div
        className={style.firstContainer}
        initial={{ opacity: 0, x: 100 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: false }}
        transition={{
          ease: 'easeInOut',
          duration: 1,
          x: { duration: 1 }
        }}
      >
  
 // 스케일 0.5에서 1로 확대
 <motion.div
         className={style.secondImageWrap}
         initial={{ opacity: 0, scale: 0.5 }}
         whileInView={{ opacity: 1, scale: 1 }}
         viewport={{ once: false }}
         transition={{![](https://velog.velcdn.com/images/yeahzzl/post/62c1c2fb-1a61-4f7a-9c44-42d556f08216/image.gif)

           ease: 'easeInOut',
           duration: 1
         }}
        >
    
// 버튼 hover시 1.1크기로 튕기듯이 커졌다가 작아짐
<motion.button
          className={style.button}
          whileHover={{ scale: 1.1 }}
          transition={{ type: 'spring', stiffness: 400, damping: 10 }}
          >

간단한 설명

• initial 은 컴포넌트가 마운트될 때 초기 상태를 정의
• opacity 0 → 처음 나타날 때 투명도가 0(아예 보이지 않음)
• y 가 50 -> 처음 나타날 때에 Y 축 방향으로 50px 만큼 아래에 위치
• whileInView 는 컴포넌트가 viewport(사용자 화면 내)에 있을 때의 상태를 정의
• opacity 1 → 컴포넌트가 화면에 나타나면 투명도가 1(완전히 보임)
• y 가 0 → 컴포넌트가 화면에 나타나면 Y 축 위치가 원래대로 (0) 돌아옴
• viewport 는 whileInView 가 어떻게 동작할지를 정의
• once 가 false → 컴포넌트가 화면에 들어올 때마다 whileInView 의 애니메이션이 재실행. 만약 true로 설정하게 되면 애니메이션이 최초 한번만 실행됨.
• transition 은 애니메이션 전환(initial 에서 whileInView 상태로)이 어떻게 진행될지 정의
• ease 가 easeInOut → 애니메이션 속도가 시작과 끝에서 서서히 변화
• duration 이 2 → 전체 애니메이션의 지속 시간이 2초
• y 의 duration 이 1 → Y축 방향으로 이동하는 애니메이션이 1초동안 진행됨

나는 매우 기본적이고 간단한 것만 사용했기 때문에 심플하지만 공식문서를 살펴보면 더 다양한 기능을 활용할 수 있을 것이다!

참고자료
공식문서
정리잘되어있는글!⭐️⭐️⭐️⭐️⭐️

✍🏻 회고

css작업은 기능보다 마음이 편해서 좋다..
요즘 웹 사이트를 보면 정적인것 보다 스크롤이나 호버에 따라 다양한 모션효과가 적용된 것을 많이 볼 수 있는데 간단히라도 사용법을 알아볼 수 있어서 좋았다.