Category: React

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.

Animation

We can use the animate prop to specify how to animate an element.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      style={{ backgroundColor: "red", width: 100, height: 100 }}
      animate={{ scale: 2 }}
      transition={{ duration: 0.5 }}
    />
  );
}

We set animate to { scale: 2 } to double the size of the div.

The transition component is set to { duration: 0.5 } to set the duration of the animation in seconds.

Keyframes

We can add keyframes to create more complex animations.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      style={{ backgroundColor: "red", width: 100, height: 100 }}
      animate={{
        scale: [1, 2, 2, 1, 1],
        rotate: [0, 0, 270, 270, 0],
        borderRadius: ["30%", "30%", "50%", "50%", "40%"]
      }}
    />
  );
}

We add the scale property to set the quality to scale the div by in each frame.

rotate sets the rotation of the div in degrees in each frame.

borderRadius sets the border radius of the div in each frame.

Each entry an array is a quantity in a frame.

Variants

We can set predefined visual states in which a component can be in.

For instance, we can write:

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

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-100%" }
};

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>toggle</button>
      <motion.nav animate={isOpen ? "open" : "closed"} variants={variants}>
        <p>foo</p>
      </motion.nav>
    </>
  );
}

to add animation when we toggle click on the toggle button to toggle the nav on and off.

The variants object have the style that the motion.nav can be in in different animation stages.

If it’s open , then opacity is 1, and x is 0.

And if it’s closed , then opacity is 0 and x is '-100%' .

Now we should see the ‘foo’ text move when we click on toggle.

Gesture Animations

We can listen to various gestures and animate elements when various gestures are applied.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <motion.div
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      ></motion.div>
    </>
  );
}

to listen for hovers with the whileHover prop.

And we listen to taps with the whileTap prop.

Then we set the scale to change the size of the div when those gestures are applied.

Conclusion

We can add complex animations with keyframes, and animate when gestures are applied with Framer Motion.

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.

Motion Components

We can add motion components to add elements that we can animate.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <motion.div
        animate={{ scale: 0.5 }}
        style={{ backgroundColor: "red", width: 100, height: 100 }}
      />
    </div>
  );
}

to create a div that shrinks to half of the size that is specified in the style prop.

scale set to 0.5 does the shrinking with animation.

Animation

The animate prop lets us animate an element.

For example, we can write:

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

export default function App() {
  const variants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 }
  };

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={variants}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

to create a div with the motion.div component.

And we animate from opacity 0 to opacity 1.

The initial prop has the name of the initial state of the div.

animate has the name of the style of the div after the animation.

The variants prop has the variants object, which specifies the animation style for each state.

Gestures

Framer Motion can direct hover, tap, pan and drag gestures automatically.

So we can do things to an element when these gestures are applied.

For example, we can write:

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

export default function App() {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      style={{ backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

to let us drag the red div horizontally with the drag and dragConstraints props.

drag set to 'x' lets us drag horizontally. And dragConstraints lets us drag within the given bounds.

left sets the left limit and right sets the right limit.

whileHover has the style to change when we hover over the div.

whileTap lets us change the style when we tap on the div.

MotionValue

We can set motion values to set the style we want.

For example, we can write:

import React from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]);

  return (
    <motion.div
      style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
      drag="x"
    />
  );
}

to let us animate the red div by changing the opacity when we drag it.

The useMotionValue prop creates a reactive property to watch form.

x is the horizontal position of the div.

The 2nd argument is the distance values.

And the 3rd argument is the opacity values that correspond to the distance values in the 2nd argument.

Conclusion

We can add basic animations with size and opacity changes and drag and drop effects with Framer Motion.

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.

Installation

We can install Framer Motion by running:

npm install framer-motion

Getting Started

We can create a div that moves by writing”

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

export default function App() {
  return (
    <div className="App">
      <motion.div
        animate={{ x: 100 }}
        style={{ width: 100, height: 100, backgroundColor: "red" }}
      />
    </div>
  );
}

We set the animate prop to an object with the x property to move it horizontally.

Draggable Element

We can make an element draggable by using the drag and dragConstraints props.

To use them, we write:

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

export default function App() {
  return (
    <div className="App">
      <motion.div
        drag="x"
        dragConstraints={{ left: -100, right: 100 }}
        style={{ width: 100, height: 100, backgroundColor: "red" }}
      />
    </div>
  );
}

We set drag to 'x' to let us drag and div horizontally.

And we add the dragConstraint prop to let us drag left 100px to right 100px.

We can animate lists by using the motion.ul and motion.li components.

For example, we can write:

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

export default function App() {
  const list = { hidden: { opacity: 0 } };
  const item = { hidden: { x: -10, opacity: 0 } };

  return (
    <motion.ul animate="hidden" variants={list}>
      <motion.li variants={item}>foo</motion.li>
      <motion.li variants={item}>bar</motion.li>
      <motion.li variants={item}>baz</motion.li>
    </motion.ul>
  );
}

We set the variants prop to objects to let us hide the elements with various styles.

animate is set to hidden , which is the name of the animation.

We set the opacity to 0 to hide the items.

The x property is set to -10 to move the li elements 10px to the left.

We can combine drag and drop with animation by using various hooks that comes with Framer Motion.

For example, we can write:

import React from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);

  return (
    <motion.div
      drag="x"
      style={{ x, opacity, width: 100, height: 100, backgroundColor: "red" }}
    />
  );
}

to create a red div that animate when we drag it.

The useMotionValue prop lets us create a distance value that we pass into the style prop.

useTransform lets us change the opacity as the div is animated.

The first argument is the quantity to change.

The 2nd argument is the distance values.

And the 3rd argument is the opacity values that correspond to the distance values in the 2nd argument.

So when we drag left or right, the opacity of the div becomes 0.

Conclusion

We can add basic animations and drag and drop effects with Framer Motion.