Jump to content
Search Community

How to run GSAP only when the target class/id is available?

titungdup test
Moderator Tag

Recommended Posts

I have applied gsap animation on a home page but when i navigate to other pages then there is a warning saying "gsap target not found". I have found how to turn it off but i want to solve the warning and not just turn it off.

 

One solution i have come up with is applying the animation only when the class/id is found by putting a condition. But i don't think that is a very good way because i'll have to check every class or id that i use. 

 

Is there any better way to handle this issue?

Link to comment
Share on other sites

Hey titungdup and welcome to the GreenSock forums. 

 

Can you please tell us more about your setup? Are you using a framework? Any other tools to transition between pages? Or are you just reusing the same .js file on all of your pages even though not all of the JS applies to every page?

 

In general you should check to see if a target exists before trying to use it if there could be a possibility that it doesn't exist. If you just want to get rid of the warnings you could use 

gsap.config({ nullTargetWarn: false });

 

  • Like 1
Link to comment
Share on other sites

Hi @ZachSaucier,

 

I am using Hugo and jquery. And i am also using scrollmagic with gsap. I haven't used page transitions, it just redirects to different route.

 

Yes, i am using a single JS file bundled using webpack so all the JS is applied to every page. Should i split it? I think it's a bit hard to split the JS so i went with bundled option.

 

 

Link to comment
Share on other sites

6 hours ago, titungdup said:

i am also using scrollmagic with gsap

We do not recommend ScrollMagic. Instead we highly recommend using the official GSAP scroll plugin: ScrollTrigger! It's better in every way.

 

6 hours ago, titungdup said:

i am using a single JS file bundled using webpack so all the JS is applied to every page.

I recommend just using if checks to make sure elements exist then.

 

If you provide a minimal demo it's possible that we could have additional pointers.

Link to comment
Share on other sites

Is ScrollTrigger free to use? I am not a GreenSock Club member. 

 

The issue exists on multiple page website so i am not sure if i can replicate it in codepen. I'll go with checking if the element exists. Thank you so much for your feedback.  

 

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