altalt

Gesture animations in Motion dev

posted by  Akash Sarki  on  30 May 2025

Motion extends basic sets of event listeners with a powerful set of UI gestures.
Currently it has support for - hover, tap, pan, drag and inView. Each gesture has both a set of event listeners and a while- animation prop.

Animation Props

Motion provides multiple gesture animation props - whileHover, whileTap, whileFocus, whileDrag and whileInView. Using these the animation target can define animations while the gesture is active.

<motion.div 
  whileHover={{ scale: 1.5, transition: {{ duration : 1 }} }}
  whileTap="tap"
/>

In all of these, we can either set animation values or the name of any variants defined via the variant prop.

<motion.button
  whileTap="tap"
  whileHover="hover"
  variants={buttonVariants}
>
  <svg>
    <motion.path variants={iconVariants} />
  </svg>
</motion.button>

Gestures

Hover

Hover gesture detects when a pointer hovers over or leaves a component.

These contains gesture animation prop such as whileHover and event handler like onHoverStart and onHoverEnd.

Tap

Tap gestures gets detected when pointer is clicked and released on the same point.

<motion.button
  whileTap={{ scale: 0.9 }}
>Click</motion.button>

It fires tap event when the pointer taps or ends click on the same component it started on, and fires tapCancel event if it does not ends on the same component.

Some animation props are - onTapStart, whileTap, onTap, tapCancel.

Pan

The Pan gestures detects when a pointer is pressed down on a component and moves further than 3 pixels. It ends with release in pointer.

<motion.div
  onPan={(e, pointInfo) => {}}
/>

Pan gestures does not have while- animation prop.

Drag

Drag gesture applies when a pointer drags a component over the x/y axis.

<motion.div 
  drag
  whileDrag={{ scale: 1.2, backgroundColor: "#eee" }}
/>

Set dragMomentum prop to false in order to prevent element from performing an inertia animation, which happens by default.

Set up constrains -

You can set constrains by either of two options:

  • Use dragConstraints prop and set value as an object with keys left, right, top, bottom.
  • Set a "ref" to a container and pass the same ref to the dragConstraint as a value.
<motion.div
  drag="x"
  dragConstraints={{ left: 0, right: 300 }}
/>

const MyComponent = () => {
  const constraintsRef = useRef(null)

  return (
     <motion.div ref={constraintsRef}>
         <motion.div drag dragConstraints={constraintsRef} />
     </motion.div>
  )
}

Setting dragConstraints with the container as a ref will allow draggable element to pass the container but eventually gets back to the parent container with some elasticity. In order to control elasticity tweak value of the prop dragElastic which ranges from 0 to 1.

export default function Home() {
  const ref = useRef(null);
  return (
    <motion.div
      style={{ width: 500, height: 500, backgroundColor: "#777" }}
      ref={ref}
    >
      <motion.div style={box} drag dragConstraints={ref} dragElastic={0} />
    </motion.div>
  );
}

In order to lock the direction of the drag, we can use dragDirectionLock. This will lock the element to the first axis its dragged on.

Focus

Focus gestures detects when a component gains or loses focus.

<motion.a whileFocus={{ scale: 1.2 }} href="#" />

How to stop event Propagation?

A child component can stop drag and tap gestures and their related while animations from firing on parents by passing e.stopPropagation() to onPointerDownCapture.

<motion.div whileTap={{ scale: 2 }}>
  <button onPointerDownCapture={e => e.stopPropagation()} />
</motion.div>
footer company logo

Stay informed with Web Journal - Delivering fresh, reliable news and insights on the topics that matter most, all in one place.

Contact Address :

Checkpost, Siliguri
West Bengal - 734003
9883475729
akashsarki12345@gmail.com

Copyright © 2025 Web Journal. All Rights Reserved