framer-motion으로 리액트에서 애니메이션을 쉽게 ✨

최근에 리액트로 포트폴리오를 구축했는데 애니메이션을 빠르고 쉽게 적용하고 싶었다.
framer-motion이 내가 찾던 라이브러리 였다. (왜 이제 안걸까;;? ㅎ)

https://www.npmjs.com/package/framer-motion

framer-motion

기본적으로 사용법을 살펴보니 CSS로 애니메이션 좀 구성해봤다 하면 어렵지 않게 사용할 수 있었다.

 

 

 

기본 사용법

import { motion } from "framer-motion"

const Project = () => {
	return (
    	
        <motion.div>
        ...
        </motion.div>
    
    )
}

motion.div를 마크업하고 옵션을 넣어주면 끝이다. 셋팅이 너무 쉽다!

 

 

자연스럽게 위로 올라오는 듯한 느낌 주기

      <MainText
        initial={{ y: 50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ type: "spring", duration: 1 }}
      >
        welcome!
      </MainText>

initial이 초기 상태이고 animate가 초기~끝 으로 향하는 상태이다.
transition은 애니메이션의 디테일한 옵션을 넣어주면 된다.
옵션들이 많아서 디테일하게 적용할 수 있다.
그런데 opacity의 트랜지션 속도랑 y축에서 올라오는 트랜지션의 속도를 다르게 하는 방법은 아직 모르겠다,,;

 

 

스크롤시 애니메이션 효과 주기

   <ProjectFigure
      initial={{ opacity: 0, y: 50 }}
      whileInView={{
        opacity: 1,
        y: 0,
        transition: {
          type: "spring",
          duration: 0.5,
        },
      }}
      viewport={{ once: true, amount: 0 }}
    >

whileInView는 요소가 화면에 보였을때의 애니메이션 상태이다. animate와 같다고 보면 된다
viewport 뷰포트와 관련된 옵션인데. once는 애니메이션을 몇번 트리거 할건지? amount는 요소가 뷰포트에 어느정도에 나타났을때 트리거 할건지가 조정해주는 것이다.
나는 전체화면에 들어왔을때를 원해서 0으로 지정했다.

 

 

인피니티 슬라이드 효과 주기

요것은 아래의 코드를  참고했다.

https://medium.com/@caden0002/implementing-an-infinite-slider-in-react-with-tailwind-css-and-framer-motion-69173adb31a3

Implementing an Infinite Icon Slider in React with Framer Motion

import React from "react"
import styled from "styled-components"
import { motion } from "framer-motion"
import PropTypes from "prop-types"

const Slider = ({ slideArr }) => {
  const duplicatedSlides = [...slideArr, ...slideArr]

  return (
    <SliderWrap>
      <SliderBox
        animate={{
          x: ["-100%", "0%"],
        }}
        transition={{ ease: "linear", duration: 15, repeat: Infinity }}
      >
        {duplicatedSlides.map((slide, index) => (
          <Slide key={index} $slideLeng={slideArr.length}>
            <div>{slide}</div>
          </Slide>
        ))}
      </SliderBox>
    </SliderWrap>
  )
}

const SliderWrap = styled.div`
  position: relative;
  overflow: hidden;
  width: 300vw;
  height: 15vw;
  margin: 2em 0;
`
const SliderBox = styled(motion.div)`
  display: flex;
`

const Slide = styled.div`
  flex-shrink: 0;
  width: ${(props) => 300 / props.$slideLeng}vw;

  > div {
    display: flex;
    padding: 0 0.2em;
    flex-direction: column;
    height: 100vh;
    font-size: 3rem;
    font-weight: 900;
    word-break: keep-all;
  }

  ${({ theme }) => theme.device.desktop} {
    > div {
      font-size: 8.5vw;
    }
  }
`
Slider.propTypes = {
  slideArr: PropTypes.array.isRequired,
}
export default Slider

그런데 위의 코드가 요소들의 width값을 따로 지정을 해줘야 하는데 지정을 안해줄 경우 버벅거리는 현상이 있었다.
width값이 딱 떨어져야 버벅임이 없어서 css를 약간 커스텀하여 대략 맞춰줬다.
슬라이더의 전체 width값을 널널하게 300으로 맞추고 슬라이드 요소의 width값을 300으로 나누었다.
랜딩 페이지라 꼼수를 쓰긴했는데,,;; 디테일한 계산은 추후 살펴봐야 할 것 같다.

 

 

💁🏻‍♀️ 느낀점.

나는 급하게 사용하느라 살짝 훑어보고 바로 적용했는데 그 짧은 사이에도 러닝커브가 굉장히 낮으며 쉽게 애니메이션을 적용할 수 있다는걸 느꼈다. CSS로 번거롭게 애니메이션을 별도로 적용을 안해도 된다는 점이 좋았다.
특히 스크롤 효과도 간단한 옵션으로 마무리가 되고 variants으로 효과를 그룹화 해줄 수 도 있었다.
모듈화도 쉽게 가능해보이며 최적화된 렌더링을 제공한다고 하니 리액트에서 애니메이션을 사용할 일이 있다하면 추천한다!!!