DEV Community

loading...

Animation stop working on conditional rendering ..!!

Gurupal Singh
・1 min read
const Products = ({
  product: { name, displayImage, subtitle, price, uuid, slug },
}) => {
  const [show, setShow] = useState(false);

  const clickVariants = {
    opened: {
      top: "50vh",
    },
    closed: {
      top: "0vh",
    },
  };

  return (
    <>
      <div className="products">
      <motion.button onClick={() => setShow((state) => !state)}>
                Buy
                </motion.button>
              </div>
      {show && (
        <>
          <div
            onClick={() => setShow((state) => !state)}
            className="backdrop"
          ></div>
          <motion.div
            initial={false}
            animate={show ? "opened" : "closed"}
            variants={clickVariants}
            className="modal__container"
          >
            <h1>{name}</h1>
          </motion.div>
        </>
      )}
    </>
  );
};

export default Products;
Enter fullscreen mode Exit fullscreen mode

Can someone tell me why i am unable to run popup animation while adding condition ? I tried searching it on google but nothing works for me.

Discussion (0)