• 목차

애니메이션 대부분은 살펴본 motion, AnimatePresence 컴포넌트를 사용해 구현하지만, Framer Motion은 좀 더 복잡한 용도로 사용할 수 있는 기능이 포함되어 있습니다.

호버 (Hover)

그러한 기능 중 하나가 motion 컴포넌트에 호버링, 탭 또는 드래그와 같은 사용자의 제스처에 응답하여 애니메이션을 트리거할 수 있도록 하는 일련의 속성(props) 입니다.

다음은 호버링(hovering) 제스처에 의해 반응하는 애니메이션 예시입니다.

<motion.div whileHover={{ opacity: 0 }}>
	마우스 포인터가 요소에 올라오면 투명해집니다.
</motion.div>

whileHover 속성(prop)은 호버 제스처입니다. 위 코드는 마우스를 div 요소 위로 가져가면 페이드 아웃(fade-out)되고, 다시 마우스가 떠나면 이전 상태로 되돌아 갑니다.

호버 모션을 사용하면 리스트 아이템에 마우스가 올라간 동안 모션을 적용할 수 있습니다.

리스트, 리스트 아이템 스타일 컴포넌트를 작성해 모양을 꾸며봅니다.

export const CardList = styled.ul`
  margin: 0;
  padding-left: 0;
  list-style: none;
`;

export const CardItem = styled(motion.li)`
  border: 1px solid ${({ theme: { white } }) => white};
  padding: 1rem;
  font-size: 2rem;
  text-transform: uppercase;
  color: ${({ theme: { white } }) => white};
  background: #ff7c7c;
`;

작성한 리스트, 리스트 아이템 컴포넌트를 사용해 list 데이터를 순환하도록 구성한 후, whileHover 속성 모션을 설정합니다.

<CardList>
  {list.map((item) => (
    <CardItem
      key={item}
      whileHover={{
        y: -20,
        scale: 1.2,
        boxShadow: '0 4px 3px rgba(0,0,0,0.4)',
        backgroundColor: '#fff',
        color: '#333',
      }}
      transition={{
        type: 'spring',
        mass: 2,
      }}
    >
      {item}
    </CardItem>
  ))}
</CardList>