Next.js로 구현하는 숫자 롤링 애니메이션

Layout

1~9층 중 1,2,3,4,5 층에 각각 숫자가 있고 overflow: hidden을 사용하여 5층만 화면에 보여준다.

애니메이션이 종료된 후 최종 적으로 보여질 숫자는 1층에 위치시킨다. 이후 렌더링 될 때 각 숫자를 현재 층 수 +4 층으로 이동하는 애니메이션을 넣어준다.

code

const Roulette = ({
  target,
  color,
  size,
}: {
  target: string;
  color?: string;
  size?: string;
}) => {
  /** 애니메이션에 걸리는 총 시간 */ 
  const duration = Math.random() + 0.1;
  return (
    <div className={("Wrapper")}>
      <div className={("Focused")}>
	      /** 5층 -> 9층 */
        <motion.div
          initial={{y: 0}}
          animate={{y: 120, transition: {duration: duration}}}
          className={("Number")}>
          {Math.floor(Math.random() * 10)}
        </motion.div>
        /** 4층 -> 8층 */
        <motion.div
          initial={{y: -30}}
          animate={{y: 90, transition: {duration: duration}}}
          className={("Number")}>
          {Math.floor(Math.random() * 10)}
        </motion.div>
        /** 3층 -> 7층 */
        <motion.div
          initial={{y: -60}}
          animate={{y: 60, transition: {duration: duration}}}
          className={("Number")}>
          {Math.floor(Math.random() * 10)}
        </motion.div>
        /** 2층 -> 6층 */
        <motion.div
          initial={{y: -90}}
          animate={{y: 30, transition: {duration: duration}}}
          className={("Number")}>
          {Math.floor(Math.random() * 10)}
        </motion.div>
        /** 1층 -> 5층 */
        <motion.div
          initial={{y: -120}}
          animate={{y: 0, transition: {duration: duration}}}
          className={("Number")}>
          {target}
        </motion.div>
      </div>
    </div>
  );
};

export default Roulette;

적용하고자 하는 숫자의 각 자리수마다 Roulette을 적용한다.

targetNum.toString().map((e,i) => <Roulette key={i} target={e} />)