Framer Motion — Exit Animation and Staggering Animations

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.

Exit Animations

We can add exit animation with Framer Motion.

For example, we can write:

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

const image = {
  src:
    "https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
};

export const Slideshow = ({ image }) => (
  <AnimatePresence>
    <motion.img
      key={image.src}
      src={image.src}
      initial={{ opacity: 0, y: 200 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  </AnimatePresence>
);

export default function App() {
  return (
    <>
      <Slideshow image={image} />
    </>
  );
}

We use the AnimatePresence component to enclose the motion.img component to show animation on the image when it’s being unloaded.

We set the inital and animate props to set the starting and ending styles respectively.

And we have the exit prop to set the style to show after animating.

Mount Animations

We can add animations when the component mounts when we set initial to false and we the animate prop.

For instance, 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={{ x: 100 }}
        initial={false}
      />
    </>
  );
}

to move the div 100px to the right when we mount the App component.

Propagation

If motion components have children, then changes in variants will be flown down through the component hierarchy.

For example, if we have:

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

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

  const item = {
    visible: { opacity: 1, x: 0 },
    hidden: { opacity: 0, x: -100 }
  };

  return (
    <motion.ul initial="hidden" animate="visible" 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 animate the ul and li with the motion.ul components.

And we set the variants to set the styles for stages of the animation.

The initial prop has the initial style values of the animation.

And animate has the name of the style that’s applied at the end of the animation.

Orchestration

We can set delays in various parts of the animation.

For example, we can write:

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

export default function App() {
  const list = {
    visible: {
      opacity: 1,
      transition: {
        when: "beforeChildren",
        staggerChildren: 0.3
      }
    },
    hidden: {
      opacity: 0,
      transition: {
        when: "afterChildren"
      }
    }
  };

  const item = {
    visible: { opacity: 1, x: 0 },
    hidden: { opacity: 0, x: -100 }
  };

  return (
    <motion.ul initial="hidden" animate="visible" 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 add the list object to stagger the animation of the li elements with the staggerChildren property in the visible stage.

Then when property sets the stage when the staggering is applied.

Conclusion

We can add animation when our component unmounts and tweak our animation in various ways with Framer Motion.