Framer Motion — Applying Animation Styles

Photo by Beth Rufener on Unsplash

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.

initial Prop and Multiple Variants

We can set the initial prop to an array of variant names.

For instance, we can write:

import { motion } from "framer-motion";
import React from "react";
const variants = {
  visible: {
    opacity: 1,
    transition: { duration: 2 }
  },
  active: {
    backgroundColor: "green"
  }
};
export default function App() {
  return (
    <>
      <motion.div
        initial={["visible", "active"]}
        variants={variants}
        style={{
          backgroundColor: "red",
          width: 100,
          height: 100
        }}
        animate={{ opacity: 0 }}
      />
    </>
  );
}

We apply the styles from both the visible and active variant to apply styles from both when our component mounts.

Also, we can pass in false as the value of initial to disable mount animation.

For example, we can write:

import { motion } from "framer-motion";
import React from "react";
export default function…