Share Posted June 10, 2021 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" ); Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 10, 2021 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" ) } 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 10, 2021 Awesome @OSUblake, I like the second option better as well. Thanks 1 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2021 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 More sharing options...
Author Share Posted October 15, 2021 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 More sharing options...
Share Posted October 15, 2021 @Stefano Monteiro Yes, that was clear. I'd like to know if there's a way to avoid to specify each classes. Link to comment Share on other sites More sharing options...
Share Posted October 15, 2021 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 More sharing options...
Share Posted October 15, 2021 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 More sharing options...
Share Posted October 25, 2021 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 More sharing options...
Share Posted October 25, 2021 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 More sharing options...
Share Posted October 25, 2021 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 More sharing options...
Share Posted October 25, 2021 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 More sharing options...
Share Posted October 25, 2021 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! 1 Link to comment Share on other sites More sharing options...
Share Posted October 25, 2021 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 More sharing options...
Share Posted October 26, 2021 Hi Jack, I hope you can see my minimal demo and set up. See the Pen eYEvwOG by fernandofas (@fernandofas) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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! 1 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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 More sharing options...
Share Posted October 26, 2021 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? 1 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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 More sharing options...
Share Posted October 26, 2021 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 More sharing options...
Share Posted October 26, 2021 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 More sharing options...
Share Posted October 26, 2021 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; 1 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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. 2 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2021 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!! 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