Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

GSAP3 Target object not found

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

 

 

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

cool, thanks!

 

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

  • Like 1

Share this post


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

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
8 hours ago, Santosh Ban said:

This needs to be false I think.

 


nullTargetWarn: false

Oops, good catch. I corrected the post.

Share this post


Link to post
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.

×