title: Swinging image animation, need help to fix. Still OPEN
body: <p>So I've got this <a href="http://jsfiddle.net/rksh1tdv/" rel="nofollow">JsFIDDLE</a> here and it works, only problem is, I need the Javascript to function, for some reason my website wont detect it as is.</p>
  
  <p>Here's what is in the Fiddle.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="swing" style="background-color:#transparent;"&gt;
  &lt;img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.swing {
  -webkit-perspective:300px;
  -moz-perspective: 300px;
  -ms-perspective: 300px;
  perspective: 300px;
  }
  .swing img {
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -transform-origin: 50% 0%;
  }
  </code></pre>
  
  <p>And the Javascript</p>
  
  <pre><code>$('.swing img').mouseenter(function(event)
  {
  var sign = event.currentTarget;
  sign.rotationX = 0;
  TweenMax.to(sign, 0.2, { rotationX:-20, ease:Power1.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"]});
  TweenMax.to(sign, 0.4, { rotationX:8, ease:Power1.easeInOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.2 });
  TweenMax.to(sign, 3, { rotationX:0, ease:Elastic.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.6 });
  });
  function onUpdate(tween)
  {
  var target = tween.target;
  target.style.webkitTransform = target.style.transform = target.style.msTransform = target.style.MozTransform = 'rotateX('+(target.rotationX)+'deg)';
  }
  </code></pre>