Learning header Animation

[ajswebdesigns]

Hello, I hope Im okay asking this and not going against any guidelines, Im very new to GSAP and I added some code to make my header bounce in and a small text effect, and it seems to work perfect in the console, however when I actually add it to my website it appears funny. It wasn't working at all when I had the code loaded in the head, then I moved to the footer and it started somewhat working. Was just wondering if someone could help point me in the right direction to solving this, I would greatly apprecaite it. 

 

www.ajswebdesigns.com

 

Code below of what I was using, if you paste it in the console it works fine

 

 

gsap.from('.site-header', {duration:1, y: '-100%', ease: 'bounce'})
gsap.from('.site-header a', {duration:1, opacity:0, delay:1, stagger:.1})

[OSUblake]

Welcome to the forums @ajswebdesigns

 

It's very hard to troubleshoot a live site. Can you put just that header animation inside a minimal demo? Thanks!