Jump to content


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. 



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 (
          style={{ width: "10rem", height: "10rem", backgroundColor: "red" }}
          <p>Hello, I am a red box.</p>
  } 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.