Animations with Framer Motion

Framer Motion is a production-ready animation and gesture library. It allows the user to easily create simple and complex animations. It also offers more advanced listeners and extends the basic set of React event listeners.

At the point of this post being written, Framer Motion v3.10.2 requires React v16.8 or greater.

Installation

npm install framer-motion

Getting started

Once installed, we can add motion to our components by

import { motion } from "framer-motion"

We can then animate for instance a box with scale and rotation

.box {
  background: rgb(86, 134, 245);
  width: 200px;
  height: 200px;
}

<motion.div
  className="box"
  animate={{ scale: 0.9, rotate: 20 }}>
</motion.div>

Variants

If we want to animate from one state to another, we can do so by adding the initial prop

<motion.div
  className="box"
  initial={{ opacity: 0 }}
  animate={{ scale: 0.9, rotate: 20, opacity: 1 }}
/>

We can also use the variants prop to define multiple states

const boxVariants = {
  visible: {
    opacity: 1,
    scale: 0.9,
    rotate: 20,
  },
  hidden: { opacity: 0 },
};

<motion.div
  className="box"
  initial="hidden"
  animate="visible"
  variants={boxVariants}
/>

In this case, we animate from the state hidden to visible. The state name can be anything as long it matches the content in initial and animate props.

Transitions

To customize the transition we can either add transition prop to motion.div or to the variable boxVariants state e.g.

const boxVariants = {
  visible: {
    opacity: 1,
    scale: 0.9,
    rotate: 20,
    transition: {
      duration: 2,
    },
  },
  hidden: { opacity: 0 },
};

<motion.div
  className="box"
  initial="hidden"
  animate="visible"
  variants={boxVariants}>
</motion.div>

Any components that use boxVariants will have the same transition. If you don't want to share the transition between components, use transition as a prop instead.

To repeat the animation we can just add the repeat props inside the transition e.g. repeat: 10 or repeat: Infinite. By default, the animation will loop from start to finish, so if we want to have an Yo-yo effect instead we can set the repeatType to reverse. Here is an example

<motion.div
  className="box"
  initial={{ opacity: 0 }}
  animate={{ scale: 0.9, rotate: 20, opacity: 1 }}
  transition={{ repeat: 2, repeatType: 'reverse', duration: 2 }}
/>

Gestures

We can add gestures such as hover or tap with whileHover or whileTap

const boxVariants = {
  end: {
    opacity: 1,
    scale: 0.9,
    rotate: 20,
  },
  start: {
    opacity: 0,
    background: 'rgb(86, 134, 245)',
  },
  hover: {
    background: '#eee',
    cursor: 'pointer',
  },
};

<motion.div
  className="box"
  initial="start"
  animate="end"
  variants={boxVariants}
  whileHover="hover"
  whileTap="hover"
/>

Keyframes

We can also add keyframes to create more complex animations

<motion.div
  className="box"
  animate={{
    scale: [0.9, 1.1, 0.8, 1.1, 0.9],
    rotate: [20, -20, 270, -120, 0],
    transition: {
      duration: 2,
      repeat: Infinity
    ,},
  }}
/>

And there are so much more to learn about Framer Motion! Check out their docs if you are interested on learning more.

Thanks for reading! Any feedback are welcome and appreciated 🙏