Framer Motion — Handling Gestures

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

Gestures

Framer Motion is capable of recognizing gestures.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <motion.button
      whileHover={{
        scale: 1.2,
        transition: { duration: 1 }
      }}
      whileTap={{ scale: 0.9 }}
    >
      hello world
    </motion.button>
  );
}

to change the size of the button when we hover or click on it.

scale changes the size. transition.duration sets the duration of the effect.

We can also set the variants prop to set the effects for the button.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

const variants = {
  buttonVariants: { opacity: 1 },
  iconVariants: { opacity: 0.5 }
};

export default function App() {
  return (
    <motion.button whileTap="tap" whileHover="hover" variants={variants}>
      <svg>
        <motion.path variants={variants} />
      </svg>
    </motion.button>
  );
}

We set the whileTap and whileHover to set the handlers for these gestures.

And we set the variants prop to set the effect that we want to see.

Hover

We can add animation when we hover over an element with the whileHover prop.

For instance, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      onHoverStart={(e) => {
        console.log(e);
      }}
      onHoverEnd={(e) => {
        console.log(e);
      }}
    >
      hello
    </motion.div>
  );
}

Then we can listen to hover start and hover end events with the onHoverStart and onHoverEnd props.

e has the object that we can get information about the hovering.

Tap

We can also handle animation with the tap event with the whileTap prop.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

export default function App() {
  return <motion.div whileTap={{ scale: 0.8 }}>hello</motion.div>;
}

We set the animation effect we want to apply with the whileTap prop.

And we can listen for taps with the onTap prop:

import { motion } from "framer-motion";
import React from "react";

function onTap(event, info) {
  console.log(info.point.x, info.point.y);
}

export default function App() {
  return (
    <motion.div onTap={onTap} whileTap={{ scale: 0.8 }}>
      hello
    </motion.div>
  );
}

We get the position of the tap with the onTap function.

info.point.x and info.point.y have the coordinates of the tap.

Pan

We can also listen for panning events with Framer Motion.

For instance, we can write:

import { motion } from "framer-motion";
import React from "react";

function onPan(event, info) {
  console.log(info.point.x, info.point.y);
}

export default function App() {
  return <motion.div onPan={onPan}>hello</motion.div>;
}

to listen for pans.

When we drag the div, onPan will be run.

Framer Motion components also take the onPanStart and onPanEnd props to listen for start and end of panning.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";

function onPan(event, info) {
  console.log(info.point.x, info.point.y);
}

function onPanStart(event, info) {
  console.log(info.point.x, info.point.y);
}

function onPanEnd(event, info) {
  console.log(info.point.x, info.point.y);
}

export default function App() {
  return (
    <motion.div onPan={onPan} onPanStart={onPanStart} onPanEnd={onPanEnd}>
      hello
    </motion.div>
  );
}

Conclusion

We can listen for various gestures with the Framer Motion library.