I tried to make a simplified version of what I experienced in another project with using GSAP. Essentially I get 2 warning in the console.
GSAP target undefined not found.
GSAP target not found.
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. Gsap Docs about Cleanup
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;
}
}
I posted this also on Greensock forums. Thanks to OSUblake an Admin over at Greensock, he was able to solve my issue. To help others here's what he said.
Your effect is running every time the props changes, so you're going to create a new animation every time, so of course the target will not be found if it's not rendered. You would need to do something like this.
useLayoutEffect(() => {
if (props.toggleModal) {
gsap.from(box.current, {
...
});
}
}, [props.toggleModal])
You can import useLayoutEffect from react.
Please check out our React Guide for more information. https://greensock.com/react/