Animation

Although it is quite easy to overuse animation effects, Kube makes it pretty easy to create meaningful, smooth and overall nice looking animation. Feel free to click every button below to see what it does, and then only use those effects that are essential to your project.

Slide

slideUp
slideDown
Slide Up Slide Down
$(’#element’).animation(‘slideUp’);
$(’#element’).animation(‘slideDown’);

Fade

fadeIn
fadeOut
Fade In Fade Out
$(’#element’).animation(‘fadeIn’);
$(’#element’).animation(‘fadeOut’);

Flip

flipIn
flipOut
Flip In Flip Out
$(’#element’).animation(‘flipIn’);
$(’#element’).animation(‘flipOut’);

Zoom

zoomIn
zoomOut
Zoom In Zoom Out
$(’#element’).animation(‘zoomIn’);
$(’#element’).animation(‘zoomOut’);

Rotate

rotate
Rotate
$(’#element’).animation(‘rotate’);

Shake

shake
Shake
$(’#element’).animation(‘shake’);

Pulse

pulse
Pulse
$(’#element’).animation(‘pulse’);

Slide In

slideInRight
slideInLeft
slideInDown
Slide In Right Slide In Left Slide In Down
$(’#element’).animation(‘slideInRight’);
$(’#element’).animation(‘slideInLeft’);
$(’#element’).animation(‘slideInDown’);

Slide Out

slideOutRight
slideOutLeft
slideOutUp
Slide Out Right Slide Out Left Slide Out Up
$(’#element’).animation(‘slideOutRight’);
$(’#element’).animation(‘slideOutLeft’);
$(’#element’).animation(‘slideOutUp’);

Callback

$(’#element’).animation(‘fadeIn’, function()
{
    // code …
});