+++ description = "Add some motion, shaking, pulsing, sliding and more" title = "Animation" date = "2017-04-10T16:43:08+01:00" draft = false weight = 200 bref="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" toc = true script = 'animation' +++
Slide
slideUp
slideDown
$('#element').animation('slideUp');
$('#element').animation('slideDown');
Fade
fadeIn
fadeOut
$('#element').animation('fadeIn');
$('#element').animation('fadeOut');
Flip
flipIn
flipOut
$('#element').animation('flipIn');
$('#element').animation('flipOut');
Zoom
zoomIn
zoomOut
$('#element').animation('zoomIn');
$('#element').animation('zoomOut');
Rotate
Shake
Pulse
Slide In
slideInRight
slideInLeft
slideInDown
$('#element').animation('slideInRight');
$('#element').animation('slideInLeft');
$('#element').animation('slideInDown');
Slide Out
slideOutRight
slideOutLeft
slideOutUp
$('#element').animation('slideOutRight');
$('#element').animation('slideOutLeft');
$('#element').animation('slideOutUp');
Callback
$('#element').animation('fadeIn', function()
{
// code ...
});