framer-motion-five.tsx

const Five = () => {
  const container: Variants = {
    active: {
      background: "#ff00b1"
    },
    disabled: {
      background: "#0D00FF"
    }
  };

  const [active, setActive] = React.useState(false);

  return (
    <motion.div
      variants={container}
      animate={active ? "active" : "disabled"}
      onClick={() => setActive(!active)}
      className="container"
    >
      {[0, 1, 2].map(value => (
        <div key={value} className="box" />
      ))}
    </motion.div>
  );
};