GSAP target not found warning on console

[Stefano Monteiro]

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

 

[OSUblake]

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

 

[Stefano Monteiro]

Awesome @OSUblake, I like the second option better as well. Thanks

[Black Ducas]

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

 

[Stefano Monteiro]

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

 

[Black Ducas]

@Stefano Monteiro Yes, that was clear. I'd like to know if there's a way to avoid to specify each classes.

[OSUblake]

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.

 

[GreenSock]

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...
}

 

[fernandofas]

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

[Cassie]

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.

 

[fernandofas]

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.

 

[fernandofas]

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... ?

[Cassie]

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!

 

[GreenSock]

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.

[fernandofas]

Hi Jack, I hope you can see my minimal demo and set up.

See the Pen eYEvwOG by fernandofas (@fernandofas) on CodePen.

[Cassie]

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!

[fernandofas]

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.

[Cassie]

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?

 

 

[fernandofas]

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

[Cassie]

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.

[Cassie]

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"

 

[fernandofas]

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

 

[Cassie]

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;

 

[OSUblake]

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.

[fernandofas]

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!!