Skip to Content

animate()

Handle repeated animations in a single function.

JavaScript July 2, 2019

Usage

JavaScript
nebula.animate(selector, animationClass)

Parameters

selector
(Required) (Object or String) The element to animate
Default: None

newAnimationClasses
(Optional) (String) The corresponding animation class
Default: "animate"

oldAnimationClasses
(Optional) (String) Conflicting animation classes
Default: None

Parameter Notes

newAnimationClasses include “nebula-push”, “nebula-shake”, “nebula-fade fastest”, etc. “animate” is automatically appended to these class strings.

oldAnimationClasses is used when the same element may be animated in multiple different ways. These classes are removed before newAnimationClasses are applied so the previous animation type is not re-activated.

Request or provide clarification »

Examples

JavaScript
nebula.animate(jQuery('#example'), 'nebula-push');

Remove conflicting classes (push) before using new animation (shake)

JavaScript
nebula.animate(jQuery('#example'), 'nebula-shake', 'nebula-push'); //shake is being added, push is being removed.

Demo


Additional Notes

This function facilitates the animation class and reflowing the element as needed in a single function so it does not need to be done manually in multiple steps.

Source File

Located in /assets/js/nebula.js on line 3953.

JavaScript
nebula.animate = function(selector, newAnimationClasses, oldAnimationClasses){
    if ( typeof selector === 'string' ){
        var element = jQuery(selector);
    } else if ( typeof selector === 'object' ) {
        var element = selector;
    } else {
        return false;
    }

    newAnimationClasses += ' animate';
    element.removeClass(newAnimationClasses); //Remove classes first so they can be re-added.

    if ( oldAnimationClasses ){
        element.removeClass(oldAnimationClasses); //Remove conflicting animation classes.
    }

    nebula.reflow(element); //Refresh the element so it can be animated again.
    element.addClass(newAnimationClasses); //Animate the element.
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.animate = function(selector, newAnimationClasses, oldAnimationClasses){
    //Write your own code here, leave it blank, or return false.
}