Dove Man Dove Man - 1 month ago 22
CSS Question

Swinging animation on image. (like a tavern sign.)

So I got this code here, but for some reason it will not work on my website. If there's something wrong with the code please tell me. It works in jsfiddle just fine.

HTML

<div class="swing" style="background-color:#transparent;">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>


CSS

.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%;
}


JS

$('.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)';
}

Answer

The fiddle has an external resource. If you only copy/paste code from the code panels you will not include the resource.

Add this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.1/TweenMax.min.js"></script>