Jump to content
Search Community

GSAP3 Target object not found

celli test
Moderator Tag

Recommended Posts

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

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

  • 1 month later...
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

 

  • Like 1
  • Thanks 2
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.
×
×
  • Create New...