I tried to make a simplified version of what I experienced in another project. Essentially I get 2 warning in the console.
I tried to make a modal that it will render if the state is equal to true. Else it will return null.
I believe my issue is due to returning null. But I don't know how to do this another way.
I experimented with the kill() option in gsap, but I had no luck with it. Here is the reference from the docs that I read.
import React, { useRef, useEffect } from "react";
import gsap from "gsap";
export default function TestGsap(props) {
const box = useRef();
useEffect(() => {
gsap.from(box.current, {
y: "500",
ease: "expo",
duration: 2,
});
});
if (props.toggleModal === true) {
return (
<div>
<section
ref={box}
style={{ width: "10rem", height: "10rem", backgroundColor: "red" }}
>
<p>Hello, I am a red box.</p>
</section>
</div>
);
} else {
return null;
}
}