Performant CSS Animation Manipulation Library - AniX.js

AniX.js is a tiny (< 3kb gzipped) yet high-performance JavaScript animation library to animate any DOM elements using native CSS & CSS3 properties (e.g. color, background, rotate, flip, etc).

More features:

• Available as jQuery or Vanilla JavaScript plugin.
• Also works as a React component.
• Compatible mode. Compatible with old browsers, old browsers do not have animation.
• Use settimeout or css transtionend event.
• Easing functions.

How to use it:

1. Install & import the AniX.js library.

# NPM
$ npm install anix --save

import { AniX } from 'anix';

2. Or directly include the AniX.js library in the document.

<!-- As a Vanilla JS plugin -->
<script src="/path/to/dist/umd/anix.umd.js"></script>

<!-- As a jQuery plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jq/anix.jq.js"></script>

3. Animate a DOM element by altering the CSS properties. Possible parameters:

• ele: any DOM element
• time: duration of the animation
• args: CSS styles & configs

// As a Vanilla JS plugin -->
AniX.to(element,.5,{
  height:"100px",
  // more CSS styles and options here
});

//  As a jQuery plugin
$('.element').to(.5, {
  'left': Math.random() * $(window).width() + 'px',
  'background-color': getRandomColor(),
  // more styles and options here
});

4. Animate a DOM element from one style to another.

• ele: any DOM element
• time: duration of the animation
• fromArgs: CSS styles & configs
• toArgs: CSS styles & configs

// As a Vanilla JS plugin
AniX.fromTo(element,.5,{height:"200px"},{height:"100px"});

// As a jQuery plugin
$('.element').fromTo(.5, {color:'#ffcc00'}, {color:'#000'});

5. Apply a delay to the animation.

AniX.to(element,.5,{
  height:"100px",
  delay:0.3,
  // more CSS styles and options here
});

6. Apply an easing function to the animation. All possible easing functions:

1. linear
2. easeBasic
3. easeIn
4. easeOut
5. easeInOut
6. easeOutCubic
7. easeInOutCubic
8. easeInCirc
9. easeOutCirc
10. easeInOutCirc
11. easeInQuad
12. easeOutQuad
13. easeInOutQuad
14. easeInQuart
15. easeOutQuart
16. easeInOutQuart
17. easeInQuint
18. easeOutQuint
19. easeInOutQuint
20. easeInSine
21. easeOutSine
22. easeInOutSine
23. easeInBack
24. easeOutBack
25. easeInOutBack

AniX.to(element,.5,{
  height:"100px",
  "ease": AniX.ease.easeOutBack,
  // more CSS styles and options here
});

7. Callback functions that will be fired on animation start/end.

AniX.to(element,.5,{
  height:"100px",
  onComplete: function(){
    alert("over");
  },
  onStart: function(){
    alert("start");
  },
  // more CSS styles and options here
});

8. API methods.

// kill the instance
AniX.kill(dom);
$('.element').kill(complete?: boolean)

// get transform
AniX.getTransform(InputValue);
$('.element').getTransform(InputValue)

// use nativecss transtionend event
AniX.useTranstionEvent = true;

// Compatible with old browsers, old browsers do not have animation
AniX.compatible = true;

// Debug mode
AniX.debug = true;

// Check if has css Transition?
console.log(AniX.support);

Changelog:

v1.3.7 (2022-02-05)

• Update

v1.3.6 (2021-08-29)

• Upgrade version and modify multiple configurations

---

This awesome jQuery plugin is developed by aliaszz. For more Advanced Usages, please check the demo page or visit the official website.