Framer-motion 데이터 변경만으로 페이지 표현하기.

컴포넌트 하나에 데이터만 변경하면서, 여러 페이지가 존재하는 것처럼 애니메이션을 만들어보자!

아래의 코드를 보며, 어떻게 만들어야 하는지 확인해보자

const boxMove = {
//variants만들기
  enter: (isNext: number) => {
    return {
      top: isNext > 0 ? 1700 : -1700,
      //page up이면 아래에서 위로 들어옴
      //down이면 그 반대
    };
  },
  center: {
    zIndex: 1,
    top: 0,
    display: "flex",
  },
  exit: (isNext: number) => {
    return {
      top: isNext > 0 ? -1700 : 1700,
      //page up이면 중앙에서 위로 사라짐
      //down이면 그 반대
    };
  },
};
export const Base = () => {
  const [started, setStarted] = useState(false);
  const [pages, setPage] = useRecoilState(pageState);
  const [isNext, setIsNext] = useState(1);
  //페이지가 +, - 에 따라 값을 정해줌
  const onUp = () => {
    setPage((prev) => prev - 1);
    setIsNext(-1);
  };
  const onDown = () => {
    setPage((prev) => prev + 1);
    setIsNext(1);
  };
  return (
  	<Box>
  		<AnimatePresence custom={isNext}>
          <HomeBox
            key={pages}
            variants={boxMove}
            custom={isNext}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{ duration: 2 }}

            <ReactPlayer
              url={homeData[pages].url}
              width="100%"
              height="100%"
              loop={true}
              playing={true}
              muted={true}
              controls={false}
              style={{ maxHeight: "90vh" }}
            />
          </HomeBox>
        </AnimatePresence>
        <RemoCon>
          {pages !== 0 && (
            <FontAwesomeIcon
              onClick={onUp}
              style={{ cursor: "pointer" }}
              color="white"
              icon={faArrowUp}
            />
          )}
          {pages !== 4 && (
            <FontAwesomeIcon
              onClick={onDown}
              style={{ cursor: "pointer" }}
              color="white"
              icon={faArrowDown}
            />
          )}
        </RemoCon>
    </Box>
};

#REFERENCE

framer-motion