Framer Motion — Applying Animation Styles

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 App() {
  return (
    <>
      <motion.div
        initial={false}
        style={{
          backgroundColor: "red",
          width: 100,
          height: 100
        }}
        animate={{ opacity: 1 }}
      />
    </>
  );
}

Then the opacity of the div will be set to 1 when we mount the div.

animate Prop

The animate prop lets us set the values to animate to.

For example, we can write:

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

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

We set the animate prop to an object with opacity set to 1 to set the opacity of the div to 1 at the end of the animation.

Also, we can set the animate style to variant.

For instance, we can write:

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

const variants = {
  visible: {
    opacity: 1,
    transition: { duration: 2 }
  }
};

export default function App() {
  return (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        style={{
          backgroundColor: "red",
          width: 100,
          height: 100
        }}
        variants={variants}
        animate="visible"
      />
    </>
  );
}

to set animate to the 'visible' variant to show the div.

For example, 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={{ opacity: 0 }}
        style={{
          backgroundColor: "red",
          width: 100,
          height: 100
        }}
        variants={variants}
        animate={["visible", "active"]}
      />
    </>
  );
}

to set the animate to an array of variant names to apply all the styles at the end of the animation.

exit

We can set the exit prop to set the style to animate when the component is removed from the tree.

For example, we can write:

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

export const MyComponent = ({ isVisible }) => {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          style={{
            backgroundColor: "red",
            width: 100,
            height: 100
          }}
        />
      )}
    </AnimatePresence>
  );
};

export default function App() {
  const [isVisible, setIsVislble] = useState(true);
  return (
    <>
      <button onClick={() => setIsVislble(!isVisible)}>toggle</button>
      <MyComponent isVisible={isVisible} />
    </>
  );
}

We create the MyComponent component to get which has the exit prop to apply some styles to the div when it’s being removed from the tree.

Conclusion

We can apply styles at various stages of animation with Framer Motion.