Usage
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.
Examples
nebula.animate(jQuery('#example'), 'nebula-push');
Remove conflicting classes (push) before using new animation (shake)
nebula.animate(jQuery('#example'), 'nebula-shake', 'nebula-push'); //shake is being added, push is being removed.
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/modules/utilities.js on line 358.
No Hooks
This function does not have any filters or actions available. Request one?nebula.animate = async function(selector, newAnimationClasses, oldAnimationClasses){
await nebula.yield();
let element;
if ( typeof selector === 'string' ){
element = jQuery(selector);
} else if ( typeof selector === 'object' ){
element = selector;
} else {
nebula.help('nebula.animate() requires a selector as a string or jQuery object.', '/functions/animate/');
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. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
For non-module import functions:
nebula.animate = function(selector, newAnimationClasses, oldAnimationClasses){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.animate = function(selector, newAnimationClasses, oldAnimationClasses){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.animate === 'function' ){
nebula.animate = function(selector, newAnimationClasses, oldAnimationClasses){
//Write your own code here, leave it blank, or return false.
}
}
});