Framer Motion 을 사용하여 Gesture 애니메이션을 구현합니다.
whileDrag
whileFocus
whileHover
whileTap
const boxVariants = {
hover: { scale: 1.5, rotateZ: 90 },
click: { scale: 1, borderRadius: "100px" },
};
function App() {
return (
<Wrapper>
{/* boxVariants.hover, boxVariants.click */}
<Box variants={boxVariants} whileHover="hover" whileTap="click" />
</Wrapper>
);
}
<Box drag variants={boxVariants} whileHover="hover" whileTap="click" />
whileDrag
사용<Box drag ...(생략) whileDrag={{backgroundColor: "rgb(46, 204, 113)"} } />
const boxVariants = {
hover: { scale: 1.5, rotateZ: 90 },
click: { scale: 1, borderRadius: "100px" },
drag: {
backgroundColor: "rgba(46, 204, 113, 0.8)",
transition: { duration: 10 },
},
};
function App() {
return (
<Wrapper>
{/* boxVariants.hover, boxVariants.click */}
<Box
drag
variants={boxVariants}
whileHover="hover"
whileTap="click"
whileDrag="drag"
/>
</Wrapper>
);
}
drag="x"
, drag="y"
: x 축, y 축에 제약dragConstraints
drag 되는 요소가 움질일 수 있는 범위 제한하는 가상의 박스useRef()
로 제약 가능dragSnapToOrigin
: 드래그 끝마친 후 원점으로 되돌아 옵니다.dragElastic
: 드래그 탄성, 기본값 0.5 (0 <= x <=1)const BiggerBox = styled.div`
width: 600px;
height: 600px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
`;
const boxVariants = {
hover: { scale: 1.5, rotateZ: 90 },
click: { scale: 1, borderRadius: "100px" },
};
function App() {
const biggerBoxRef = useRef<HTMLDivElement>(null);
return (
<Wrapper>
{/* boxVariants.hover, boxVariants.click */}
<BiggerBox ref={biggerBoxRef}>
<Box
drag
dragSnapToOrigin
dragElastic={0.5}
dragConstraints={biggerBoxRef}
variants={boxVariants}
whileHover="hover"
whileTap="click"
/>
</BiggerBox>
</Wrapper>
);
}
Framer Motion Docs
리액트 마스터클래스, 노마드코더