반응형

React/framer-motion 3

[React] motionValue 사용법!!!(framer-motion)

일단 useMotionValue를 사용한다 여기에 초기값을 적어주는 0을 적어주는게 좋다 tigim 은 Box안에 style에 x값에 넣어줄건데 x의 초기값을 0으로 해주는 것이다. tigim은 재렌더링 되지않는다 너무 많은 움직임이 포착되어서 그러면은 어떻게 console 에 찍어볼까? 이럴땐 onChange함수를 사용하면된다! useEffect(() => tigim.onChange(() => console.log(tigim.get())) , [tigim]) 이런식으로 tigim의 위치를 알수가 있다. 그러면 이거를 tigim에 연결할려면 style 에 x값에 value로 넣어주면된다. 우리는 useTransForm으로 다른 값을 얻을 수가 있는데!!! 이게 아주 중요하다!! const tomato =..

React/framer-motion 2022.10.11

[React] framer-motion에 대해 알아보자!

정말 파워풀한 framer-motion은 노드 패키지로 다운 받으면 된다! 정말 직이준다! https://www.framer.com/motion/ 이미지 썸네일 삭제 Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 대표사진 삭제 사진 설명을 입력하세요. 여기 예시를 보아도 엄청 멋진 것들을 만들 수 있는데 앞으로 이 카테고리에 framer-motion 관련된 글을 적을 것이다!

React/framer-motion 2022.10.11
반응형