react에서 애니메이션 구현 (w. framer motion)

web에서 애니메이션을 구현하는 기본적인 방법은 css animation 이 있다. 하지만, 이를 js 에서 좀 더 로직컬하게 다루고 싶은 경우 "framer motion"을 추천한다.

---

다음은 css animation 을 framer-motion 으로 1:1 컨버팅이 가능함을 보여주는 예제이다.

[베이스코드는 framer motion document 에서 가져왔다]

 

 

 

framer-motion 으로 구현하기 코드

<motion.div
  className="box"
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{
    duration: 0.8,
    delay: 0.5,
    ease: [0, 0.71, 0.2, 1.01]
  }}
/>

 

css animation 으로 구현하기 코드

.box-with-css {
  animation-name: bigger;
  animation-duration: 0.8s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  transition-timing-function: ease(0, 0.71, 0.2, 1.01);
}

@keyframes bigger {
  from {
    opacity: 0;
    scale: 0.5;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}