Category Archives: javascript

How to animate HTML5 elements with animate.css and MooTools

I see animate.css is used many people but in animate.css website the demo is written using jQuery. I use MooTools a lot & in MooTools animation is quite complex. So for my future projects I thought to rewrite the demo of animate.css for MooTools.

Step-1 : Create a HTML5 file

<!DOCTYPE html>
<title>MooTools with animate.css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


Step-2 : Add animate.css & mootools

<link rel="stylesheet" href="//" />

Add animate.css before the end of head tag & add mootools js before the end of body tag.

<script src="//"></script>

Step-3 : Implement MooTools one method for element

//Source -
one: function(ev, fn) {
if (!this.oneEvents) {
this.oneEvents = [];
var oneFunc = function(e) {
if (!this.oneEvents.contains(fn)) {
return this;
this.addEvent(ev, oneFunc);

 This method will be used to trigger when the animation is finished.

Step-4 : Add HTML

 <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span>
 <div class="wrap">
 <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 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 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 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 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 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 label="Lightspeed">
 <option value="lightSpeedIn">lightSpeedIn</option>
 <option value="lightSpeedOut">lightSpeedOut</option>
 <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 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 label="Specials">
 <option value="hinge">hinge</option>
 <option value="rollIn">rollIn</option>
 <option value="rollOut">rollOut</option>
 <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 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>
 <button class="butt js--triggerAnimation">Animate it</button>

Step-5 : Add mootools js

 function testAnim(x) {
 $('animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
 window.addEvent('domready',function() {
 $$('.js--triggerAnimation').addEvent('click', function(e){
 var anim = $$('.js--animations')[0].get('value');
 $$('.js--animations').addEvent('change', function(){
 var anim = $(this).get('value');

Now check the full code on codepen. You can find the full source at

js variable assign array or object

When we sometime create  a library we have to assign some a variable as object or array.

var man = {
name : {
first : '',
last : ''
children : {},
toString : function () {
return + ' ' + + ' has ' + this.children.length + ' children and they are ' + this.children;
}; = 'Arif Mahmud', = 'Rana';

When run on firebug
When run on firebug

Will I assign as an array or object

var man = {
name : {
first : '',
last : ''
children : [],
toString : function () {
return + ' ' + + ' has ' + this.children.length + ' children and they are ' + this.children;
}; = 'Arif Mahmud', = 'Rana';

Output :



What happens here

There is no JavaScript error.  When we children to array it solves the problem. When we call push method on children it throws error because it was declared as an object not as an array. So push method isn’t available for object.


Always declare variable as an array rather object. Because than you can access array methods.