onComplete function returning null

[Rossmiester]

Hi, 

 

I am targeting an element within an svg that has an id (<path id="idName"> </path>) and when I console.log it or run the function I get back "null." What I am trying to do is hide that element via style="none". So I am calling a function on the onComplete var (onComplete: myFunc()), that function is simply using an getElementByID storing it in a variable and then assigning the style.display to none (e.style.display = "none"). 

 

I have searched the web for answers and some people have said that the DOM hasn't loaded entirely by the time the function is called. Some have said to use .addEventListener (document.addEventListener("DOMContentLoaded", myFunc)) or move the function to the end of the document. I have tried both and still logging "null." Seems like a pretty basic thing but any help would be appreciated. Thanks!

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo but it looks like you definitely made one of the common errors, literally calling the onComplete function and assigning its RETURN value as the onComplete itself because you put () after it, triggering it to execute:

 

// BAD! Calls it immediately and assigns the result
onComplete: yourFunc()

// GOOD
onComplete: yourFunc

 

If you still need help, please make sure you provide a minimal demo, like in CodePen. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rossmiester]

Hi, 

 

Thanks for the quick response. I also tried the call without the () and it still returns "null". I am going to try and recreate my issue here. Thanks

[Rossmiester]

Don't worry about the other Propellers not working. I am just focused on making the one animate the way I want first. I've commented the code in the JS that is problematic 

 

See the Pen JjLXZqo by MikeyJRossi (@MikeyJRossi) on CodePen

[GreenSock]

// BAD
document.getElementById("#fl-6")

// GOOD
document.getElementById("fl-6")

Remember, if you're using getElementById(), you pass the ID in (without the hash).

[GreenSock]

By the way, you could probably simplify that and eliminate the onComplete altogether: 

gsap.fromTo("#fl-6", {opacity: 0}, {opacity: .5, ease: "none", display: "none"})

 

[Rossmiester]

No freaking way - lol. I am so dumb, wow. You don't know how long i've been trying to figure this out. For some reason I thought the hash was supposed to be there. Gosh...

 

THANK YOU FOR SAVING ME! 

[GreenSock]

Happy to help. We've all done that. Don't feel bad.

[Rossmiester]

I am trying to make the propellers repeat continuously. I know you do a "repeat: -1" but I only want it to repeat the whole sequence and not every single element to give it the effect of spinning. I tried creating a timeline and putting the repeat: -1 there but that doesn't work.

[GreenSock]

1 minute ago, Rossmiester said:

I am trying to make the propellers repeat continuously. I know you do a "repeat: -1" but I only want it to repeat the whole sequence and not every single element to give it the effect of spinning. I tried creating a timeline and putting the repeat: -1 there but that doesn't work.

If you need help, please provide a minimal demo that clearly shows the issue. Don't include your whole project - just a few colored elements is best. 

[Rossmiester]

Updated -- 

See the Pen OJvNwJz by MikeyJRossi (@MikeyJRossi) on CodePen

[Rossmiester]

I realized when I added the methods to the timeline that I forgot to rid the gsap part. Now its working correctly, I just need to speed it up. Thanks for your help - truly appreciated! 

[GreenSock]

So you're all set now? 

 

To speed it up, it could be as simple as: 

timeline.timeScale(2);

 

[Rossmiester]

Yup - perfect. Thanks so much!