[FRAMER MOTION] Framer Motion 사용하기

학습일 : 2023. 05. 10

---

Framer Motion 사용을 위해 install

npm install framer-motion

사용방법을 간단하게 정리하자면
설치 후 import 해주고
평소에 쓰던 HTML 태그 앞에 motion. 을 붙여주면 된다.

이렇게

<motion.div></motion.div>

그리고 기존의 스타일링 할 때

const Box = styled.div`
...
`;

이렇게 작성해주던 것을

const Box = styled(motion.div)`
...
`;

이렇게 만들어주면 된다.

이제 prop을 전달해볼건데
animate, transition을 전달해주고 안에 css 속성을 적어주도록 한다.


<App.tsx>

import { styled } from "styled-components";
import { motion } from "framer-motion";

// style
const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  return (
    <Wrapper>
      <Box transition={{ delay: 3 }} animate={{ borderRadius: "100px" }} />
    </Wrapper>
  );
}
export default App;

실행결과