제스처 애니메이션: 가리키기, 누르기와 끌기

제스처 속성 개요

whileHover

<motion.button
  whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Hover me
</motion.button>

whileTap

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click
</motion.button>

whileFocus

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

드래그 활성화

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
  style={{ cursor: 'grab' }}
>
  Drag me
</motion.div>

참조를 사용한 dragConstraints

const constraintsRef = useRef(null);

<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    style={{ width: 80, height: 80, background: '#4f46e5' }}
  />
</div>

dragElastic

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

dragSnapToOrigin

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

팬 이벤트

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

드래그 이벤트

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

카드 스와이프 패턴

function SwipeCard({ onSwipe }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.7}
      onDragEnd={(_, info) => {
        if (Math.abs(info.velocity.x) > 400) {
          onSwipe(info.velocity.x > 0 ? 'right' : 'left');
        }
      }}
    />
  );
}

빠른 확인

복습