GSAP browser error message

[brandpirate]

Hello everyone!

 

I am using gsap on Wordpress.

 

Not every single page contains an animation of couse, so I have the problem, that on a single page of an entire homepage-project, where I dont use all gsap animations, the browser tells me this warning. 

 

 

It tells me, that an ID that I used for a animation on one site, can obviously not be found on the current site.

 

 

But how can I avoid this error message?

 

Thanks,

 

Manu

[OSUblake]

Don't load your animation code on pages that don't use it.

 

[Shaun Gorneau]

Hi @brandpirate,

 

One thing to note is those are not errors, those are console warnings. It's perfectly fine to receive them. But, it's better not to. There are quite a few ways to go about this ... ultimately what you want to do is not run your GSAP code on pages where it's not called for.

 

Seeing as this is WordPress, I assume jQuery is loaded. You can simply check to see if an element is on the page first

 

if( $('#home-headline-h1').length ){
   gsap.from('#home-headline-h1, #home-headline-short', {delay: 0, duration: 2, opacity: 0, x: -50});
}

Hope this helps.

 

Shaun

[OSUblake]

10 minutes ago, Shaun Gorneau said:

There are quite a few ways to go about this ... ultimately what you want to do is not run your GSAP code on pages where it's not called for.

 

Sorry, WordPress n00b here. Isn't there a way to not load the file to begin with?

 

[Shaun Gorneau]

10 minutes ago, OSUblake said:

Isn't there a way to not load the file to begin with?

 With WordPress (and Drupal and pretty much any CMS) there are a number of ways you can include JS on specific pages

• You can choose to preprocess on any conditions and load JS files
• You can use PHP logic in a template file to determine when to load a JS file
• You can include the <script> call on the page itself, but that could be troublesome from a CMS standpoint

Unfortunately, it's easier to call script and css files at the config level of the theme and put the logic within the script.