titungdup Posted October 5, 2020 Share Posted October 5, 2020 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 More sharing options...
ZachSaucier Posted October 5, 2020 Share Posted October 5, 2020 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 }); 1 Link to comment Share on other sites More sharing options...
titungdup Posted October 6, 2020 Author Share Posted October 6, 2020 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 More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 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 More sharing options...
titungdup Posted October 6, 2020 Author Share Posted October 6, 2020 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 More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 19 minutes ago, titungdup said: Is ScrollTrigger free to use? I am not a GreenSock Club member. Yep! It's one of the many free GSAP plugins (provided you don't need a commercial license which is a completely separate question). 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now