Framer motion

Framer motion이란 react 애니메이션 라이브러리인데 많이들 사용하는 것 같더라. 그래서 간단하게 온 보딩화면에 framer motion을 적용해보았다.

설치

npm install framer-motion

코드

import { motion } from 'framer-motion';
const OnBoardingStepMotion = ({ step }: { step: number }) => {
  if (step === 0) {
    return (
      <motion.div
        animate={{ y: -35 }}
        transition={{ type: 'spring', repeat: Infinity, duration: 1 }}
        className='w-[20px] h-[20px] rounded-full bg-white'
      />
    );
  }

  if (step === 1) return <div className='w-[40px] h-[30px] border-2 border-white border-solid rounded-lg bg-white' />;

  if (step === 2) {
    return (
      <motion.div
        animate={{
          height: [30, 10, 30],
        }}
        transition={{ duration: 2, repeat: Infinity }}
        className='w-[40px] border-2 border-white border-solid bg-white rounded-lg'
      />
    );
  }

  if (step < 0 || step > 2) return null;
};

export default OnBoardingStepMotion;

framer motion은 motion이라는 키워드를 사용해서 element의 애니메이션을 조작하는데 element의 앞에 motion.을 붙여 사용하면 간단하게 사용할 수 있다. 위의 움짤은 제일 처음 step === 0일 때의 모션인데 transition을 통해 어떤 동작을 할 것인지 정하고 animate를 통해 시작위치나 종료 위치를 정할수가 있다.

동작