Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Stefano Monteiro

GSAP target not found warning on console

Go to solution Solved by OSUblake,

Recommended Posts

Hi, 

 

I have one JS file where I deal with all animations on the website. Whenever I load a page which doesn't have a specific element that should be animated the following warning is shown in the console. Nothing breaks and it is not a big deal, however I would like to know if this can be avoided in a GSAP way.

 

If I was writing plain JS I could write it like this:

 

   let element = document.querySelector(' .element ') !== null;

 

Here is how I have the Blog Hero Timeline in my JS.

 

// Blog Hero Timeline
  gsap.set(
    [
      ".blog-hero--hor",
      ".blog-hero--vert",
      ".blog-hero--text",
      ".blog-hero--icons",
    ],
    {
      visibility: "visible",
    }
  );

  gsap
    .timeline()
    .from('.blog-hero--hor', {
      //animation goes here
      },
      "-=.3"
    );

 

Screen Shot 2021-06-09 at 7.56.57 PM.png

Link to comment
Share on other sites

  • Solution

You can change that in the config with nullTargetWarn.

https://greensock.com/docs/v3/GSAP/gsap.config()

 

But it's probably best to prevent that code from even running.

if (document.querySelector(".blog-hero--hor")) {
	gsap.set(
    [
      ".blog-hero--hor",
      ".blog-hero--vert",
      ".blog-hero--text",
      ".blog-hero--icons",
    ],
    {
      visibility: "visible",
    }
  );

  gsap
    .timeline()
    .from('.blog-hero--hor', {
      //animation goes here
      },
      "-=.3"
    )
}

 

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Hi @OSUblake

I've a code like this:

  gsap.utils.toArray("" +
    ".js-class-1, .js-class-1-wrap > *," +
    ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors
    .forEach(el => {
    gsap.from(el, {
      scrollTrigger: {
        trigger: el,
        once: true,
      },
      y: animUpY,
      autoAlpha: 0,
    });
  });

and I obviously get in console a lot of "not found" warnings because some classes are on a page, some others on other pages, and so on.

 

What is the best practice in gsap to check them with an if?

This technique could decrease performance? (and for this reason is better shutdown warnings in gsap.config?)

Also, any advice about a better refactoring of my code is welcome

 

Thanks

 

Link to comment
Share on other sites

Try  adding  or  || in your condition. Or even and &&  , if you need the code to run if all classes are present in the page.

 

if(document.querySelector('.js-class-1') || document.querySelector('.js-class-1-wrap > *')){ // for all classes
    gsap.utils.toArray("" +
    ".js-class-1, .js-class-1-wrap > *," +
    ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors
    .forEach(el => {
    gsap.from(el, {
      scrollTrigger: {
        trigger: el,
        once: true,
      },
      y: animUpY,
      autoAlpha: 0,
    });
  });
}

 

Link to comment
Share on other sites

8 hours ago, Black Ducas said:

I've a code like this:

  gsap.utils.toArray("" +
    ".js-class-1, .js-class-1-wrap > *," +
    ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors
    .forEach(el => {
    gsap.from(el, {
      scrollTrigger: {
        trigger: el,
        once: true,
      },
      y: animUpY,
      autoAlpha: 0,
    });
  });

and I obviously get in console a lot of "not found" warnings because some classes are on a page, some others on other pages, and so on.

 

I wouldn't expect any problems with that code because the array will only contain valid elements.

 

If you know which page certain animations can only run on, then you could check for the path name kind of like here...

https://stackoverflow.com/q/16611497/2760155

 

Other than that, there's not a lot of you can do besides manually checking if an element exists. And doing the check yourself won't hurt performance. Internally, GSAP has to do the same thing.

 

Link to comment
Share on other sites

Yep, I agree with Blake. I'd probably just do this: 

let targets = gsap.utils.toArray("...all your selector text here...");
if (targets.length) {
  // create your animations in here...
}

 

Link to comment
Share on other sites

  • 2 weeks later...

Hi there,

 

Never made it to work properly.

I have a site in staging mode and even with the gsap.config( nullTargetWarn = false); the warnign are still coming up on the console.

 

I hope there is an effective way to sort this out as the warning on the console do not look nice.

 

I'm using Wordpress.

 

Cheers,

Fernando

Link to comment
Share on other sites

Hey @fernandofas,

You need to pass in an object togsap.config()


Like so - 

See the Pen gOxmLZY?editors=1011 by GreenSock (@GreenSock) on CodePen



I would strongly recommend checking if the element exists before running your GSAP code though, fixing is always better than obfuscating the errors.

 

Link to comment
Share on other sites

I get that, this is my set up:

gsap.config({ nullTargetWarn: false, trialWarn: false, });
gsap.set('.null', {opacity: 1})
gsap.registerPlugin(ScrollTrigger);
 
it just doesn't disappear.
 
Link to comment
Share on other sites

Can't make it to work I'm afraid and also, if I set up a text to slide from right to left, the width of the text is added to the viewport on mobile devices, even so the overflow-x is set up to hidden and the meta viewport as well. So, no sure what is going on with this new version of gsap... 😕

Link to comment
Share on other sites

Hmm, how strange. Are you definitely setting your config before running the other JS? If you can recreate the issue in codepen for us that would be great.

In response to your text sliding issue - that's deviating a bit from this topic so would it be possible to start a new thread with a minimal demo attached? Thanks in advance!

 

  • Like 1
Link to comment
Share on other sites

6 hours ago, fernandofas said:

So, no sure what is going on with this new version of gsap... 😕

I'm super curious to see a minimal demo, @fernandofas - we're not aware of any bugs like what you're describing. I'm sure that once we see a minimal demo, we'll be able to clear things up. The newer versions of GSAP are getting better and better, I assure you :)

 

Here's your code in a CodePen proving that it works as expected: 

See the Pen e9ee2c3261a7265d306e349887e83799 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi @fernandofas

Thanks for the demo - However as I mentioned, it would be better to start a new thread for the text issue as it's unrelated to target warnings.
 

18 hours ago, Cassie said:

In response to your text sliding issue - that's deviating a bit from this topic so would it be possible to start a new thread with a minimal demo attached? Thanks in advance!


I've looked at this on mobile and can't see any issue with it though. There's no overflow on IOS safari - the animation is same as I'm seeing on desktop (latest chrome)

Could you start a new thread and include details of what you're seeing and which browser/device? Hopefully we can find this issue for you!

  • Like 1
Link to comment
Share on other sites

Hi Cassie,

 

My issue from the demo is about the warnings. No the overflow which is sorted. I'm still seeing the warnings on the console. Cheers.

Link to comment
Share on other sites

Ok, I'm a bit confused now.

You're not targeting any null elements in that pen so there definitely won't be any errors. I certainly don't have any. Not in the codepen console or the browser console. (screenshot attached)

If I add a null tween in there, I'm still not getting any errors. (pen attached)

See the Pen eYEWYEr?editors=1011 by GreenSock (@GreenSock) on CodePen



Absolutely no errors for me at all, are you maybe looking at an old console?

 

Screenshot 2021-10-26 at 12.26.30.png

  • Like 1
Link to comment
Share on other sites

Hi Cassie,

 

That's very odd for me.

I'm following all the specs and still seeing the warnings. See attached.

 

I'm using Wordpress and not sure if that's a factor.

 

Cheers,

 

Fernando

2021-10-26 13.09.31 dev.mobilephoneinsurancedirect.com d37ee4ab46ff.png

Link to comment
Share on other sites

It shouldn't change anything - Wordpress is just HTML/CSS/JS at the end of the day.

The only reason I can think of that this is happening is that some GSAP tweens are running before you're setting your config. The order matters.

Link to comment
Share on other sites

Oh wait. I don't think those errors are GSAP errors - You would be getting "GSAP target not found"

Maybe those are errors with your other JS?
 

"GSAP target .null not found. https://greensock.com"

 

Link to comment
Share on other sites

I thought about that as well, but not sure what it is. My setup is as follow:

The gsap and scroll-trigger cdns are above the script that runs the tweens and the tweens are set up like this:

gsap.config({
    nullTargetWarn: false,
    trialWarn: false,
});
gsap.registerPlugin(ScrollTrigger);

gsap.from(".icons_wcu", {
    duration: .5,
    stagger: true,
    y: 50,
    opacity: 0,
    stagger: 0.2,
    scrollTrigger: {
        trigger: ".icons_wcu",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});
gsap.from(".iconboxesdotted", {
    duration: .5,
    stagger: true,
    y: 50,
    opacity: 0,
    stagger: 0.2,
    scrollTrigger: {
        trigger: ".iconboxesdotted",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});
gsap.from(".quoteblob", {
    duration: .5,
    y: 50,
    opacity: 0,
    scrollTrigger: {
        trigger: ".quoteblob",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});
gsap.to(".headbackblue", {
    duration: 1,
    stagger: true,
    x: -350,
    opacity: 1,
    stagger: 0.33,
    ease: "linear.none",
    scrollTrigger: {
        trigger: ".headbackblue",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});
gsap.from(".accordion-button-blue", {
    duration: .5,
    stagger: true,
    y: 50,
    opacity: 0,
    stagger: 0.2,
    ease: "linear.none",
    scrollTrigger: {
        trigger: ".accordion-button-blue",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});
gsap.from(".aso-pic-align", {
    duration: .5,
    stagger: true,
    y: 50,
    stagger: 0.2,
    ease: "linear.none",
    scrollTrigger: {
        trigger: ".aso-pic-align",
        toggleActions: "restart none none reverse",
        start: "top 95%",
        end: "bottom 95%"
    }
});

 

Link to comment
Share on other sites

Sorry @fernandofas, I know this must be frustrating, but unless you can recreate this in codepen I'm afraid we can't help - there's nothing wrong with the codepen you've posted or the following snippet. I think it's likely that the errors are coming from elsewhere in your JS.

As I mentioned before the best solution (for GSAP and general JS errors) would be to check for those elements before running any code that requires them.
 

let element = document.querySelector('.elem')

if(element) {
 // do stuff
}

// or if you're within a function

if(!element) return;



 

  • Like 1
Link to comment
Share on other sites

Those warning are coming from ScrollTrigger, which can be tested like so.

 

gsap.registerPlugin(ScrollTrigger);

gsap.config({
  nullTargetWarn: false,
  trialWarn: false
});

ScrollTrigger.create({
  trigger: ".null"
});

 

I'm guessing the nullTargetWarn doesn't apply to ScrollTrigger, and is just for animations. But like Cassie said, the best thing to do would be to check for the target before running your code.

  • Like 2
Link to comment
Share on other sites

Cassie's solution worked really well. I had to check in every single tween with different classes/ids.

At least the warnings are gone and the tweens are working like a charm.

Finally got to the bottom of this issue whish was bothering me for a long time.

Thank you to all involved.

 

Happy Tweening!!

  • Like 1
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.
×