motion
-
Framer Motion에서 whileInView + hover 충돌 해결하기개발 여정/FrontEnd 2025. 4. 9. 23:27
들어가기 앞서, Motion 라이브러리에 대해Motion 라이브러리는 리액트에서 애니메이션 효과를 구현하기 위한 라이브러리다. 화면 요소가 등장할 때 위아래로 튀어오르거나, 클릭했을 때 커졌다 작아지는 등의 다양한 시각적인 효과를 구현할 수 있다. 이전에는 이런 애니메이션 효과를 적용하려면 css에서 @keyframs를 일일이 정의해야 했지만, 모션 라이브러리를 통해 간단하게 JS 코드 내에서 구현할 수 있게 되었다. 📦 기본 설치npm run motion을 통해 간단하게 설치할 수 있다.npm run motion 사용 예시 사용하고자 하는 html 요소에 motion.을 붙이고 각종 속성을 주면 된다. Motion에서 whileInView + hover 충돌 해결기 구현하고자 했던 효과 ..