[FRAMER MOTION] Gestures

학습일 : 2023. 05. 11

---

이번엔 이걸 만들어 보도록 하겠다.

hover시 z축을 기준으로 90도가 회전되고 크기가 조금 커지고
클릭 (tap) 했을 경우 크기가 원래대로 돌아오고 원이 된다.


<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: rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

// Variants
const boxVariants = {};

// whileHover, whileTap
function App() {
  return (
    <Wrapper>
      <Box
        whileHover={{ scale: 1.2, rotateZ: 90 }} // hover시 90도 z축 회전, 1.2배 커짐
        whileTap={{ borderRadius: "1rem", scale: 1 }} // 클릭했을 경우 scale1로 돌리고 원이 됨
      ></Box>
    </Wrapper>
  );
}
export default App;

다 만들어 줬으니 variants를 사용하여 다시 해보도록 하자.

두개의 variants를 만들 것이다.
1. hover 할 경우
2. tap(클릭) 할 경우

// Variants 작성 - 이미 만들어 놓은걸 복붙해주면됨
const boxVariants = {
  hover : { scale: 1.2, rotateZ: 90 },
  tap : { borderRadius: "1rem", scale: 1 }
};

그리고 Box 컴포넌트에 variants={boxVariants} prop을 작성해줌

그리고 whileHover, whileTap을 각각 "hover", "tap" 이라고 변경해주면 된다.

전체 코드
<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: rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

// Variants
const boxVariants = {
  hover : { scale: 1.2, rotateZ: 90 },
  tap : { borderRadius: "1rem", scale: 1 }
};

// whileHover, whileTap
function App() {
  return (
    <Wrapper>
      <Box
        variants={boxVariants}
        whileHover="hover" // hover시 90도 z축 회전, 1.2배 커짐
        whileTap="tap" // 클릭했을 경우 scale1로 돌리고 원이 됨
      ></Box>
    </Wrapper>
  );
}
export default App;

실행결과