New to GSAP - why isn't my oncomplete function firing?

[connorv]

So, if you check out my codepen, you'll see the 'contact' area in the lower right hand corner.

 

The end goal is to make it so that if you click on contact, it will reveal an email address, which after 5 seconds will disappear. 

I am able to get it to appear nicely with TweenMax by setting it's autoAlpha to 0 then 1 once element with id="contact" is clicked.

 

So I have this working all through a timeline, or at least that's what I'm trying to do. I also have a function I called "InitialState" which I also have set as a timeline animation, and my plan for that is to call it when specific buttons are pressed or after 5 seconds or so goes by. I read a bit about the 'onComplete' event, so my idea was to call InitialState using onComplete and some kind of delayed timer (In my example I haven't even started on the delay ye). 

 

My first question is, is this a smart way to do this? Should InitialState really be a timeline?

 

Second of all, why doesn't InitialState ever get called? In console I can see that it says it isn't a function, but I don't understand this because I'm defining it with var the same way I did with my other animation function.

 

Obviously I'm a little confused on a couple things here - any help would be really appreciated. Can't wait to master GSAP someday.

See the Pen JZQEbP by connorv (@connorv) on CodePen

[GreenSock]

It looks like InitialState is a TimelineMax instance (not a function). And if your goal is to have that animation run as soon as the other one completes, it's probably easier to just drop it into the same timeline accordingly rather than using an onComplete to call a function that runs another timeline/tween. But I had a hard time understanding exactly what you're trying to do here. You want the email address to fade in onClick, and then wait 5 seconds and fade out? Like this?: 

 

See the Pen 8a5a6492661b75d3486d45d377571ccb by GreenSock (@GreenSock) on CodePen

 

It seemed easier/cleaner to just create a timeline in the onClick and sequence 2 tweens. Does that help?

 

[GreenSock]

I forgot to mention that I'd strongly recommend reading these two articles (if you haven't done so already): 

 

https://greensock.com/get-started-js/

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening!