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;
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.
Top comments (0)