Gesture animations with framer-motion

This is Part 2 of my framer-motion series. Take a peek at Part 1 if you need an introduction to framer-motion.

... Gestures?

It might sound really weird at first but gestures are actually just framer-motion talk for user interactions on your site. Think hovers, clicking, focusing, dragging. Things like that.

Today, we'll learn how to animate with gestures in framer-motion.

The basics of gestures

Remember our motion component from Part 1? Well, we're using it again to implement gestures.

Now the cool part about gestures is that they're actually built into the motion component as a prop, let's take a look at the hover gesture as a quick example.

import { motion } from "framer-motion"

<motion.div whileHover={ ... } />

Notice that gesture animations in framer-motion begin with the prefix "while".

This is pretty semantic, it's telling us that while the user is hovering, do the animation specified. Once the user un-hovers, play the reverse animation.

framer-motion ships with the following gestures:

• whileHover
• whileFocus
• whileTap
• whileDrag
• whileInView
• onPan

Animating with gestures

Alright time to add some animations!

Lucky for you, animations with gestures works the exact same way as animating with animate

Taking a look at hovers again:

import { motion } from "framer-motion"

<motion.div whileHover={{scale: 2, rotate: 360}} />

If we translated this motion component to English, it would say: "while the user is hovering our div,  scale the div by 2 and rotate it a 360 degrees".

You can also combine your gesture animations with regular initial and animate animations. Remember, gesture animations are basically event-triggered, they won't interfere with other animations defined in your initial / animate.

Using gestures as event handlers

On top of using whileHover, whileFocus, etc. to play animations, you can also execute arbitrary functions when users perform these actions. You can do this by calling on the on*Start and on*End function where * is a placeholder for the particular gesture you want to target.

For example, let's say we want to increment a counter everytime our user hovers over our div:

import {useState} from "react"

const [counter, setCounter] = useState(0);

const incrementCounter = () => setCounter(counter + 1);

<motion.div onHoverStart={() => { incrementCounter() }} />

When to use gestures

You might be wondering whether you should be using gestures instead of regular CSS hover/focus effects. In my opinion, it doesn't really matter.

You could make the argument that CSS animations are more performant since you don't require any additional JS to run an animation for you. At the same time, if it's easier to implement an animation with a gesture over CSS then go for it!

As we continue with this series, especially when we get to variants in framer-motion, you'll see why gestures become super helpful when making production animations!

For now though, just know that gestures are an easy way to add a little extra spice to your user interactions on the page.