Hover and tap gestures in Framer Motion
Gesture props set values that a motion component animates to while a gesture is active. The element animates back when the gesture ends.
How it works
- Animate on hover.
whileHover={{ scale: 1.1 }}enlarges the button while the pointer is over it. It goes on a motion component likeanimateandtransitiondo. [1] - Animate on tap.
whileTap={{ scale: 0.9 }}shrinks the button while it is pressed. The upgrade guide says tap events can also be triggered from the keyboard. [2] - Animate on focus. The input uses
whileFocusto scale and change its border color while focused. The upgrade guide compares its behavior to the CSS:focus-visibleselector. [2]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useState } from "react";
import { motion } from "framer-motion";
export default function App() {
const [taps, setTaps] = useState(0);
return (
<div
style={{
height: 340,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 30,
fontFamily: "sans-serif"
}}
>
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={() => setTaps(taps + 1)}
style={{
padding: "14px 28px",
fontSize: 18,
border: "none",
borderRadius: 12,
background: "#8d30ff",
color: "white",
cursor: "pointer"
}}
>
Pressed {taps} times
</motion.button>
{/* Animates while the field has focus */}
<motion.input
placeholder="Focus me"
whileFocus={{ scale: 1.05, borderColor: "#ff2b6e" }}
style={{
padding: 10,
fontSize: 16,
border: "2px solid #cccccc",
borderRadius: 8,
outline: "none"
}}
/>
</div>
);
}
Hover and click the button, then click into the text field. Code written by AgentGid [1].
Hover and click the button, then click into the text field. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with framer-motion 14.1.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.
More Framer Motion examples
The animate prop in Framer Motion Drag with useTransform in Framer Motion useSpring in Framer Motion Shared layout animations with layoutId
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.