Framer Motion — Dynamic Variants and Animation Controls

Photo by Rhythm Goyal 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.

Dynamic Variants

We can animate each element differently with dynamic variants.

For example, we can write:

import React from "react";
import { motion } from "framer-motion";
const variants = {
  visible: (i) => ({
    opacity: 1,
    transition: {
      delay: i * 0.3
    }
  }),
  hidden: { opacity: 0 }
};
const items = [
  {
    text: "foo",
    id: 1
  },
  {
    text: "bar",
    id: 2
  },
  {
    text: "baz",
    id: 3
  }
];
export default function App() {
  return (
    <div className="App">
      <motion.ul>
        {items.map(({ text, id }, i) => (
          <motion.li
            key={id}
            initial="hidden"
            custom={i}
            animate="visible"
            variants={variants}
          >
            {text}
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
}

to animate the li elements in App .

We set the delay of each item differently with the transition.delay property.