GSAP3 Target object not found

[celli 88 Likes (Contributor)]

Hi,

 

Do I need to worry about messages like these (pasted below) that come up in the console ?

GSAP target [object Object] not found. https://greensock.com     gsap-core.js:52 

 

It is because it can't find the element that is referenced in my GSAP .js, but I have many pages that reference this .js file and the page that it's throwing this in the console happens not to have this element on that page, and I don't really want to make separate .js files for each .html page.

 

Is there a way to suppress them in production, or do I need to worry about these types of messages in the console ?

 

Thanks

 

 

[ZachSaucier 7,152 Likes (Superhero)]

To suppress this warning, simply set nullTargetWarn to false in GSAP's configuration using gsap.config()  

 

Alternatively, use an if statement to detect if the element(s) exist or not and only create the tween if they exist. 

 

But no, you don't need to worry about the warnings. They're warnings for a reason!

[celli 88 Likes (Contributor)]

cool, thanks!

 

I was going to see if the element(s) exist, but figured I'd ask about these. thanks!

[garthvaderstein 2 Likes (Newbie)]

Exactly what I was looking for...if you were to use an if statement to detect if the element(s) exist or not and only create the tween if they exist - how would you go about this? Apologies, my general JS skills aren't great.

 

For example, for something as simple as this...

gsap.to(".loading-screen", {
    delay: 2.8,
    top: "-100%",
    ease: "expo.inOut"
});

 

or

 

var tween = gsap.to(".loading-screen", {
    delay: 2.8,
    top: "-100%",
    ease: "expo.inOut"
});

[ZachSaucier 7,152 Likes (Superhero)]

Hey Garth and welcome to the GreenSock forums!

 

57 minutes ago, garthvaderstein said:

if you were to use an if statement to detect if the element(s) exist or not and only create the tween if they exist - how would you go about this?

You could check if the element exists like so:

if(document.querySelector(".loading-screen")) {
  gsap.to(".loading-screen", {
      delay: 2.8,
      top: "-100%",
      ease: "expo.inOut"
  });
}

or you could use a variable for it:

const loadingScreen = document.querySelector(".loading-screen");
// Also works with querySelectorAll
// const loadingScreens = document.querySelectorAll(".loading-screen");
if(loadingScreen) {
  gsap.to(loadingScreen, {
      delay: 2.8,
      top: "-100%",
      ease: "expo.inOut"
  });
}

 

[garthvaderstein 2 Likes (Newbie)]

Thanks @ZachSaucier much appreciate the reply!

[Santosh Ban 3 Likes (Newbie)]

On 1/11/2020 at 10:48 AM, ZachSaucier said:

To suppress this warning, simply set nullTargetWarn to true in GSAP's configuration using gsap.config()  

 

Alternatively, use an if statement to detect if the element(s) exist or not and only create the tween if they exist. 

 

But no, you don't need to worry about the warnings. They're warnings for a reason!

This needs to be false I think.

 

nullTargetWarn: false

 

[ZachSaucier 7,152 Likes (Superhero)]

8 hours ago, Santosh Ban said:

This needs to be false I think.

 

nullTargetWarn: false

Oops, good catch. I corrected the post.