Created
December 17, 2014 17:22
-
-
Save arifmahmudrana/66ae0f91c8f3946e7c5b to your computer and use it in GitHub Desktop.
How to animate HTML5 elements with animate.css and MooTools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<title>MooTools with animate.css</title> | |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" /> | |
</head> | |
<body> | |
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span> | |
<div class="wrap"> | |
<form> | |
<select class="input input--dropdown js--animations"> | |
<optgroup label="Attention Seekers"> | |
<option value="bounce">bounce</option> | |
<option value="flash">flash</option> | |
<option value="pulse">pulse</option> | |
<option value="rubberBand">rubberBand</option> | |
<option value="shake">shake</option> | |
<option value="swing">swing</option> | |
<option value="tada">tada</option> | |
<option value="wobble">wobble</option> | |
</optgroup> | |
<optgroup label="Bouncing Entrances"> | |
<option value="bounceIn">bounceIn</option> | |
<option value="bounceInDown">bounceInDown</option> | |
<option value="bounceInLeft">bounceInLeft</option> | |
<option value="bounceInRight">bounceInRight</option> | |
<option value="bounceInUp">bounceInUp</option> | |
</optgroup> | |
<optgroup label="Bouncing Exits"> | |
<option value="bounceOut">bounceOut</option> | |
<option value="bounceOutDown">bounceOutDown</option> | |
<option value="bounceOutLeft">bounceOutLeft</option> | |
<option value="bounceOutRight">bounceOutRight</option> | |
<option value="bounceOutUp">bounceOutUp</option> | |
</optgroup> | |
<optgroup label="Fading Entrances"> | |
<option value="fadeIn">fadeIn</option> | |
<option value="fadeInDown">fadeInDown</option> | |
<option value="fadeInDownBig">fadeInDownBig</option> | |
<option value="fadeInLeft">fadeInLeft</option> | |
<option value="fadeInLeftBig">fadeInLeftBig</option> | |
<option value="fadeInRight">fadeInRight</option> | |
<option value="fadeInRightBig">fadeInRightBig</option> | |
<option value="fadeInUp">fadeInUp</option> | |
<option value="fadeInUpBig">fadeInUpBig</option> | |
</optgroup> | |
<optgroup label="Fading Exits"> | |
<option value="fadeOut">fadeOut</option> | |
<option value="fadeOutDown">fadeOutDown</option> | |
<option value="fadeOutDownBig">fadeOutDownBig</option> | |
<option value="fadeOutLeft">fadeOutLeft</option> | |
<option value="fadeOutLeftBig">fadeOutLeftBig</option> | |
<option value="fadeOutRight">fadeOutRight</option> | |
<option value="fadeOutRightBig">fadeOutRightBig</option> | |
<option value="fadeOutUp">fadeOutUp</option> | |
<option value="fadeOutUpBig">fadeOutUpBig</option> | |
</optgroup> | |
<optgroup label="Flippers"> | |
<option value="flip">flip</option> | |
<option value="flipInX">flipInX</option> | |
<option value="flipInY">flipInY</option> | |
<option value="flipOutX">flipOutX</option> | |
<option value="flipOutY">flipOutY</option> | |
</optgroup> | |
<optgroup label="Lightspeed"> | |
<option value="lightSpeedIn">lightSpeedIn</option> | |
<option value="lightSpeedOut">lightSpeedOut</option> | |
</optgroup> | |
<optgroup label="Rotating Entrances"> | |
<option value="rotateIn">rotateIn</option> | |
<option value="rotateInDownLeft">rotateInDownLeft</option> | |
<option value="rotateInDownRight">rotateInDownRight</option> | |
<option value="rotateInUpLeft">rotateInUpLeft</option> | |
<option value="rotateInUpRight">rotateInUpRight</option> | |
</optgroup> | |
<optgroup label="Rotating Exits"> | |
<option value="rotateOut">rotateOut</option> | |
<option value="rotateOutDownLeft">rotateOutDownLeft</option> | |
<option value="rotateOutDownRight">rotateOutDownRight</option> | |
<option value="rotateOutUpLeft">rotateOutUpLeft</option> | |
<option value="rotateOutUpRight">rotateOutUpRight</option> | |
</optgroup> | |
<optgroup label="Specials"> | |
<option value="hinge">hinge</option> | |
<option value="rollIn">rollIn</option> | |
<option value="rollOut">rollOut</option> | |
</optgroup> | |
<optgroup label="Zoom Entrances"> | |
<option value="zoomIn">zoomIn</option> | |
<option value="zoomInDown">zoomInDown</option> | |
<option value="zoomInLeft">zoomInLeft</option> | |
<option value="zoomInRight">zoomInRight</option> | |
<option value="zoomInUp">zoomInUp</option> | |
</optgroup> | |
<optgroup label="Zoom Exits"> | |
<option value="zoomOut">zoomOut</option> | |
<option value="zoomOutDown">zoomOutDown</option> | |
<option value="zoomOutLeft">zoomOutLeft</option> | |
<option value="zoomOutRight">zoomOutRight</option> | |
<option value="zoomOutUp">zoomOutUp</option> | |
</optgroup> | |
</select> | |
<button class="butt js--triggerAnimation">Animate it</button> | |
</form> | |
</div> | |
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script> | |
<script type="text/javascript"> | |
//Source - http://davidwalsh.name/mootools-one-event | |
Element.implement({ | |
one: function(ev, fn) { | |
if (!this.oneEvents) { | |
this.oneEvents = []; | |
} | |
var oneFunc = function(e) { | |
if (!this.oneEvents.contains(fn)) { | |
this.oneEvents.push(fn); | |
fn.run(e); | |
} | |
return this; | |
}; | |
this.addEvent(ev, oneFunc); | |
} | |
}); | |
function testAnim(x) { | |
$('animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ | |
$(this).removeClass(); | |
}); | |
}; | |
window.addEvent('domready',function() { | |
$$('.js--triggerAnimation').addEvent('click', function(e){ | |
e.preventDefault(); | |
var anim = $$('.js--animations')[0].get('value'); | |
testAnim(anim); | |
}); | |
$$('.js--animations').addEvent('change', function(){ | |
var anim = $(this).get('value'); | |
testAnim(anim); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment