IceCraft - Info페이지 리팩토링 : 애니메이션 라이브러리 추가하기

이전 포스팅

애니메이션 라이브러리 공부 겸 정리

Framer motion 애니메이션 라이브러리

 

프로젝트 PR

[Feat #396] - 마피아 설명 페이지 애니메이션 추가, 배포 후 수정 작업 by seokachu · Pull Request #398 · i

 

 

 

이번 프로젝트에서 배포 하고 난 뒤

마피아 게임에 대한 설명 페이지를 내가 담당해서 만들었었는데,

배포하고 나서보니........너무 대충 만든 느낌이 없지 않아 있어서 (ㅠㅠ)

애니메이션 요소를 추가하고, 좀더 사용자들이 설명 페이지에 대해 잘 읽을 수 있도록 다듬어보기로 하였다...!

리팩토링 아닌 리팩토링...(?) 시작!

 

 

 

 

 

이전 페이지

 

 

이전 마피아에 대한 설명 페이지였다...

내가 봐도 너무 대충 만들었다...

그리고 이미지와 글씨를 넣었지만 제대로 읽히지가 않았다.

글도 예전 설명 글로 되어있어서 글도 다듬고,

사용자가 설명페이지를 재미있게 볼 수 있도록 수정해보기로 했다!

 

 

 

Framer Motion 설치

npm install framer-motion

 

Docs에 나와있는대로 Framer Motion을 설치해준다.

직접 스크롤 애니메이션을 적용해도 됐지만

이미 배포한 상태라 빠르게 수정했어야 했고, 데모버전을 보면서 쉽고 빠르게 구현할 수 있어서 라이브러리를 선택하게 되었다.

 

여러가지 애니메이션을 보던 중, 나는 스크롤 애니메이션만 필요해서 스크롤 애니메이션을 사용하기로 했다!

스크롤 애니메이션은 스크롤을 내릴때 위에서 스크롤이 얼마나 되어있는지 표시해주는 애니메이션이다.
사용자 측면에서 내가 스크롤을 어디까지 내렸는지 직관적으로 확인 가능했고,
UI/UX 경험을 향상 시킬 수 있어서 좋았다.

여러가지 스크롤 애니메이션 중 Spring smoothing과 Scroll velocity 애니메이션 두개를 추가해보기로 했다.

 

 

 

1.  Spring smoothing 적용기

Spring smoothing는 사용자가 스크롤을 할때,

어디까지 스크롤 했는지 보여주는 스크롤 애니메이션이다.

 

스크롤을 할 때 마다 빨간색으로 프로그래스바가 올라가는 것을 확인할 수 있다!

 

 

 

내 프로젝트에 적용해보자!

import { motion, useScroll, useSpring } from "framer-motion";

const MafiaInfoPage = () => {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  return (
    <section>
      <motion.div className={S.progressBar} style={{ scaleX }} />
     	** 다른 코드 (중략) **
    </section>
  );
};
export default MafiaInfoPage;

 

적용한 전체 코드!

import 해서 라이브러리 모션을 불러오고,

stiffness, damping, restDelta 에 대한 값을 넣어준다.

 

 

  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

• stiffness : 값이 높을수록 더 갑작스럽게 움직임 (기본값 : 100)
  
• damping : 저항하는 반대 힘, 0으로 설정하면 스프링이 무한으로 바운스함 (기본값 : 10)
• restDelta : 거리(distance)가 이 값보다 작고 속도가 restSpeed보다 작으면 애니메이션을 종료 (기본값 : 0.01)

 

 

 

2. Scroll velocity 적용하기

 

예시에는 텍스트 애니메이션이 좌↔️우로 움직이고,

스크롤을 하면 빠르게 좌↔️우로 빠르게 움직인다.

 

 

 

 

프로젝트에 적용해보기

import { useRef } from "react";
import S from "@/style/mafiaInfo/mafiaInfo.module.css";
import { wrap } from "@motionone/utils";
import { ParallaxProps } from "@/types";
import {
  motion,
  useScroll,
  useSpring,
  useTransform,
  useMotionValue,
  useVelocity,
  useAnimationFrame
} from "framer-motion";

function ParallaxText({ children, baseVelocity = 100 }: ParallaxProps) {
  const baseX = useMotionValue(0);
  const { scrollY } = useScroll();
  const scrollVelocity = useVelocity(scrollY);
  const smoothVelocity = useSpring(scrollVelocity, {
    damping: 50,
    stiffness: 400
  });
  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
    clamp: false
  });

  const x = useTransform(baseX, (v) => `${wrap(0, -25, v)}%`);

  const directionFactor = useRef<number>(1);
  useAnimationFrame((t, delta) => {
    let moveBy = directionFactor.current * baseVelocity * (delta / 1000);

    if (velocityFactor.get() < 0) {
      directionFactor.current = -1;
    } else if (velocityFactor.get() > 0) {
      directionFactor.current = 1;
    }

    moveBy += directionFactor.current * moveBy * velocityFactor.get();

    baseX.set(baseX.get() + moveBy);
  });

  return (
    <div className={S.parallax}>
      <motion.div className={S.scroller} style={{ x }}>
        <span>{children} </span>
        <span>{children} </span>
        <span>{children} </span>
        <span>{children} </span>
      </motion.div>
    </div>
  );
}

export default ParallaxText;

 

먼저 전체코드는 이렇게 되어있다.

사용할 hook들을 import 해서 불러오고

useTransform의 훅을 사용해서 MotionValue 값을 구성한다.

useTransform : 값 범위를 다른 값 범위로 매핑할 수 있음.

 

 

 

 

  const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
    clamp: false
  });
  
  const x = useTransform(baseX, (v) => `${wrap(0, -25, v)}%`);

 

velocityFactor 변수는 useTransform훅을 사용하여 0부터 1000까지, 두번째는 0부터 5까지 이동한다.

x변수는 텍스트 길이에 따라 동적으로 계산해서 스크롤 0 부터 -25% 사이 만큼 이동하는 모션이다.

텍스트 및 뷰포트 크기를 기준으로 한다.

 

 

 

 

 

    if (velocityFactor.get() < 0) {
      directionFactor.current = -1;
    } else if (velocityFactor.get() > 0) {
      directionFactor.current = 1;
    }

 

스크롤 방향을 변경하고, 전환하는 내용이다.

 

 

 

 

 

 

  return (
    <div className={S.parallax}>
      <motion.div className={S.scroller} style={{ x }}>
        <span>{children} </span>
        <span>{children} </span>
        <span>{children} </span>
        <span>{children} </span>
      </motion.div>
    </div>
  );

 

하위 텍스트를 반복하는 횟수이다. 나는 총 4번을 반복해서 span태그에 4개를 넣었다.

더 표시하고 싶으면 span태그를 더 추가해서 반복해준다.

 

 

 

 

 

<div className={`${S.infoTitle} ${designer.className}`}>
	<ParallaxText baseVelocity={-5}>Mafia Game</ParallaxText>
	<ParallaxText baseVelocity={5}>Game Rules</ParallaxText>
</div>

 

마지막으로 사용할 곳에 불러와서 내가 사용할 텍스트 이름을 넣어주었다.

 

 

 

 

적용 결과

 

 

 

 

 

전체 페이지

 

텍스트도 좀더 가독성 있게 정리했고, 문구도 조금 더 쉽게 볼 수 있도록 수정하였다.

지금 프로젝트에 모든 애니메이션을 내가 직접 만들어서 사용했는데

이렇게 쉽고 빠르게 내가 원하는 애니메이션을 적용할 수 있다는 점이 좋았다😁

하지만 라이브러리도 결국 어떻게 돌아가고 동작하는지 알아야 잘 써먹을 수 있다는 점에서

나중에는 직접 만들어 보고, 라이브러리를 어떻게 더 잘 사용할 수 있는지

모션 라이브러리 Docs도 정독해보면서 공부해 봐야겠다✨

 

 

 

✨ 결과화면 배포 링크

IceCraft