[React] Animations 사용 방법

Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다.

Framer Motion

Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다.

설치

$ npm install framer-motion

사용

Animation

Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어됩니다. 간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있습니다.

motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }}

initial

initial: boolean | Target | VariantLabels (애니메이션의 초기값 지정)

속성, 변형 레이블 또는 시작할 변형 레이블의 배열입니다.

animate의 값으로 초기화하려면 false로 설정합니다(마운트 애니메이션 비활성화).
https://www.framer.com/docs/component/###initial

Transition

Transition은 값이 한 상태에서 다른 상태로 움직이는 방식을 정의합니다.
또한 Tween, Spring 또는 Inertia를 사용할 애니메이션 유형을 정의하는 소품을 허용할 수 있습니다.

motion.div animate={{ rotate: 180 }} transition={{ type: 'spring' }}

예제

initial, animate, transition을 사용하여 사각형이 회전하고 튕기는 애니메이션을 구현하였습니다.

import styled from 'styled-components';
import { motion } from 'framer-motion';

const Wrapper = styled.div`
  display: flex;
  max-width: 680px;
  width: 100vw;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  return (
    <Wrapper>
      <Box
        transition={{ type: 'spring', delay: 0.5 }}
        initial={{ scale: 0 }}
        animate={{ scale: 1, rotate: 360 }}
      />
    </Wrapper>
  );
}

export default App;

참고

• https://www.framer.com/motion
• https://www.framer.com/docs/animation
• https://www.framer.com/docs/transition