NETFLIX CLONE(React)(2-3) - Box animation

넷플릭스 사이트를 보면 각 콘텐츠에 마우스를 올려놓을 때 저렇게 간단한 정보들이 나온다

이걸 조금 따라해보자!

---

Box에 boxVariants로 다음과 같이 애니메이션을 넣어줄 것이다

const boxVariants = {
    normal: {
      scale: 1,
    },
    hover: {
      scale: 1.3,
      y: -50,
      transition: {
        delay: 0.5,
        duaration: 0.3,
      },
    },
  };
  ...
  <Box
    key={movie.id}
    bgphoto={makeImagePath(movie.backdrop_path, "w500")}
    variants={boxVariants}
    whileHover="hover"
    initial="normal"
    transition={{ type: "tween" }}
    >

요러면 마우스를 올렸을 때 커지는 애니메이션이 가능하다

Box 안에 Info로 정보를 넣어주자

 

...
<Box
key={movie.id}
bgphoto={makeImagePath(movie.backdrop_path, "w500")}
variants={boxVariants}
whileHover="hover"
initial="normal"
transition={{ type: "tween" }}
>
  <Info
  variants={infoVariants}
  >
    <InfoIcons>
      <div>
        <span>
        <RiPlayCircleLine/>
      </span>
      <span>
        <TbThumbUp/>
      </span>
      <span >
        <TiHeartFullOutline/> 
      </span>
      </div>

      <div>
        <span>
          <RiInformationLine/>
        </span>
      </div>
    </InfoIcons>
    <h4>{movie.title}</h4>
    <InfoDetail>
      <span>
        {movie.adult ? "청소년 관람 불가능" : "청소년 관람 가능"}
      </span>
      <span>
        {movie.release_date}
      </span>
    </InfoDetail>
  </Info>

 

이렇게만 애니메이션을 넣어주면

양 끝에 있는 요소들은 살짝 잘리게 된다.

그래서!

Box 에 다음과 같은 css를 넣어준다.

const Box = styled(motion.div)<{ bgphoto: string }>`
  ...
  &:first-child {
    transform-origin: center left ;
  }
  &:last-child {
    transform-origin: center right ;
  }
`;

 

이러면 완성!