Jump to content
GreenSock

ianscat

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

Go to solution Solved by OSUblake,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×