Using ReactJs. Console warnings: GSAP target undefined not found. & GSAP target not found.

[ianscat]

I tried to make a simplified version of what I experienced in another project. Essentially I get 2 warning in the console. 

Quote

 

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. 

 

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;
  }
}

 

[OSUblake]

Welcome to the forums @ianscat

 

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])

 

Please check out our React Guide for more information.