시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..

시작하기 앞서...React 에서 CSS 를 사용하여 움직이는 물결 애니메이션을 만들 것이다. 컴포넌트 만들기물결 3개를 만들기 위해 3개의 요소를 만들고,wave 라는 class 를 공통으로 가지면서 서로 다른 스타일링을 위해 각각 -one, -two, -three 를 가진다.import '../App.css'function WaveComponent() { return ( );}export default WaveComponent; CSS 설정물결 애니메이션을 만드는 원리는 아래처럼 생긴 요소를 애니메이션을 적용시키고 일부만 화면에 보여주어 물결이 움직이는 것 처럼 보여준다. wave 스타일요소들이 겹쳐 있기 때문에 postion 을 absolute 로 ..