MojoJS-Animation v2.1.0

MojoJS-Animation is a very lightweight and powerful javascript Animation engine.

It also has very simple, beautiful, easy-to-understand source code and "Make-You-Happy" API.

• Released versions in releases.
• Release changes in ChangeLog.

The Online Demo shows the effect and code usage.

License

MojoJS-Animation is licensed under the MIT License.

Features

• Support CSS and Transform properties animation.
• Support queue and concurrent animation.
• Support a group of elements animation.
• Support delay animation.
• Support complete callback on animate (not on element).
• Support configurable chained complete callbacks.
• Support fully compatible standard easing effect and more.

  linear,smooth,quadraticIn,quadraticOut,quadraticInOutcubicIn,cubicOut,cubicInOutquarticIn,quarticOut,quarticInOutquinticIn,quinticOut,quinticInOutexponentialIn,exponentialOut,exponentialInOutsineIn,sineOut,sineInOutcircularIn,circularOut,circularInOutelasticIn,elasticOut,elasticInOutbackIn,backOut,backInOut,backInExponentialOut,backInElasticOutbounceIn,bounceOut,bounceInOut,

Code Structure

How to use

/** * Create an animation object. * * @param {String (selector) | Array<HTMLElement> | NodeList | HTMLElement} targets */MojoJS.createAnimation(targets)/** * Animate with config. * * the variable params are optional and no order limit, they can be: *  * duration (Number) : animation time. * isQueue (Boolean) : inqueue or concurrent.  * complete (Function): complete callback.  * args (Array) : complete function args. * easing (String) : easing function name. * config (Object) : variable params in object and three more settings: * { * id (String) : the animation id. * appendTo (String) : callback when animation of this id is completed. * delay (Number) : delay time before animation starts. * }  *  * @param {Object} animStyle  * @return {Object} animation */animation.animate(animStyle[,duration,isQueue,complete,args,easing,config]);/** * The animation complete callback function. * * args (Array) : apply from [config.args]. * thisArg (Animation) : apply from current animation. */functioncompleteCallback([arg0,arg1, ...]);

Support

If the source code is useful or helpful for you, maybe buy me a coffee via Sponsor Button.