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>
Read More Blog posts

ES6 new features
ES6 (ECMAScript 2015) introduced a wide range of powerful features to JavaScript. This article lists all of those new features.

Introduction to Motion animations
Overview of Motion Animations

What are Scroll animations in Motion?
This article will give you a brief description about scroll animations in Motion dev.