TweenMax is not working on public website

[callavar]

So I just got a little hover animation finished using TweenMax.to() and .from(), and I had it working perfectly(almost) within both codepen and jsfiddle. Then, when I transferred everything over to my website, something clearly went wrong, because the hover animations are no longer firing.

 

The website is www.outbackbay.com if you'd like to see what I'm talking about. Checking the sources, I can tell that everything should be loading in right, I even added some console.logs and you can see that some, but not all are firing. They are being loaded in the right order, with the custom.js being loaded in last. The only thing that I can maybe think of is that jQuery versions may be different? I don't know how large of an effect that would cause, however. Please take the time to look over it and give me some sort of direction. Thank you.

 

And by the way, I know the codepen looks like trash, I didn't want to take the time to get everything aligned. You can see how the hover animations are supposed to look, however.

See the Pen vRrZer by callavar (@callavar) on CodePen

[Shaun Gorneau]

Try moving your "$('.planet').hover ..." to be within $(document).ready(). I dont' think they are ready when the script tries to bind the hover event handler to them.

 

$(document).ready(function() {
  
	TweenMax.to(".planet-name", 0, {
  		xPercent: '-50'
	});
  
    // ----- PLANET HOVER ------ //
    $(".planet").hover(function() {
      console.log("help me");
      TweenMax.to($(this), 0.5, {
        scale: 1.8
      })
      TweenMax.from($(this).siblings(), 0.5, {
        bottom: "-40%"
      })
      TweenMax.to($(this).siblings(), 0.5, {
        opacity: 1,
      })
    }, function() {
      TweenMax.to($(this), 0.5, {
        scale: 1
      })
      TweenMax.to($(this).siblings(), 0.3, {
        opacity: 0,
        bottom: "-20%"
      })
    });

});