Ink.UI.Animate_1 samples

The main method of this UI module is "animate". Call it with the target element (or a selector), the animation name (see below), a duration (in milliseconds or 'slow', 'medium', 'fast'), and a callback. You can also send an object with the {duration, onEnd} parameters after the animation name.

This method still works on old browsers without CSS3 animation support. When support is not detected, no animation occurs, and the callback is called immediately.

Some animation names: fadeIn fadeOut shake bounce

For the full animation name list, visit http://daneden.me/animate/

One-shot animations

You can execute an animation as a one-time thing.

Animate.animate('#to-animate', 'bounce', 'slow');

Fade out and remove an element:

This is how to do the common task of fading out an element and then remove it. It uses the fourth parameter, onEnd, to perform an action when your animation ends. If the browser does not support animations, this function is called immediately after anyway.

var toAnimate = Ink.i('element_id');
Animate.animate(toAnimate, 'fadeOut', 'slow', function () {
    InkElement.remove(toAnimate);
})

Use Ink.UI.Animate from your markup

You can use Ink.UI.Animate by adding the ink-animate class to your elements. This section shows you how can use this feature.

Usage with a trigger

The below example shows you how to set a trigger and say what animation you want using markup (Remember to load the autoload.js script!).

You can use data-attributes like data-trigger, data-animation, data-duration to customize the animation. The full list is available in the API documentation for the module.

Source code:

<button id="animate-me" class="ink-button">Animate me!</button>
<span class="ink-label info ink-animate"
    data-trigger="#animate-me"
    data-animation="fadeOut"
    data-revert="false">Hi!</span>

Animate immediately when the page loads

To see this example, refresh the page and see the label slowly fade out.

<span class="ink-animate ink-label info"
    data-animation="fadeOut"
    data-revert="false" data-duration="10000">Slowly fading oooooooout.....</span>