scottcgi / mojojs-animation

A lightweight and powerful javascript Animation engine.

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,   quadraticInOut
  cubicIn,       cubicOut,       cubicInOut
  quarticIn,     quarticOut,     quarticInOut
  quinticIn,     quinticOut,     quinticInOut
  exponentialIn, exponentialOut, exponentialInOut
  sineIn,        sineOut,        sineInOut
  circularIn,    circularOut,    circularInOut
  elasticIn,     elasticOut,     elasticInOut
  backIn,        backOut,        backInOut,  backInExponentialOut, backInElasticOut
  bounceIn,      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.
 */
 function completeCallback([arg0, arg1, ...]);

Support

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

mojojs-animation's Issues

Can this framework support cubic-bezier functions?

Recently I've been work on some complicate animation in my project, then I learned this great framework. I know it support fully compatible standard easing effect and more. but I was wonder that if we can customized easing effect by the css props 'transition-timing-function'，input the cubic-bezier function. It might be helpful for developers to restore the design of the animation.

mojoQuery bug

1. html: <a id="a" />
   selector:
   a#a => mojoQuery: 0 results
   #a.b => mojoQuery: 1 results
2. html:<a class="a b c">
   selector:
   .a.b => mojoQuery: 0 results
3. html:<a class="a b">
   selector:
   .ab => mojoQuery: 1 results

The color example code is wrong

It is the same to the transform example code.