css manipulation anix - Free Download Performant CSS Animation Manipulation Library - AniX.js

Free Download Performant CSS Animation Manipulation Library – AniX.js

Posted on

This time I will share jQuery Plugin and tutorial about Performant CSS Animation Manipulation Library – AniX.js, hope it will help you in programming stack.

css manipulation anix - Free Download Performant CSS Animation Manipulation Library - AniX.js
File Size: 325 KB
Views Total: 994
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 # NPM
2 $ npm install anix --save
1 import { AniX } from 'anix';

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

1 <!-- As a Vanilla JS plugin -->
2 <script src="/path/to/dist/umd/anix.umd.js"></script>
3  
4 <!-- As a jQuery plugin -->
5 <script src="/path/to/cdn/jquery.min.js"></script>
6 <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
01 // As a Vanilla JS plugin -->
02 AniX.to(element,.5,{
03   height:"100px",
04   // more CSS styles and options here
05 });
06  
07 //  As a jQuery plugin
08 $('.element').to(.5, {
09   'left': Math.random() * $(window).width() + 'px',
10   'background-color': getRandomColor(),
11   // more styles and options here
12 });

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
1 // As a Vanilla JS plugin
2 AniX.fromTo(element,.5,{height:"200px"},{height:"100px"});
3  
4 // As a jQuery plugin
5 $('.element').fromTo(.5, {color:'#ffcc00'}, {color:'#000'});

5. Apply a delay to the animation.

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

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
1 AniX.to(element,.5,{
2   height:"100px",
3   "ease": AniX.ease.easeOutBack,
4   // more CSS styles and options here
5 });

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

01 AniX.to(element,.5,{
02   height:"100px",
03   onComplete: function(){
04     alert("over");
05   },
06   onStart: function(){
07     alert("start");
08   },
09   // more CSS styles and options here
10 });

8. API methods.

01 // kill the instance
02 AniX.kill(dom);
03 $('.element').kill(complete?: boolean)
04  
05 // get transform
06 AniX.getTransform(InputValue);
07 $('.element').getTransform(InputValue)
08  
09 // use nativecss transtionend event
10 AniX.useTranstionEvent = true;
11  
12 // Compatible with old browsers, old browsers do not have animation
13 AniX.compatible = true;
14  
15 // Debug mode
16 AniX.debug = true;
17  
18 // Check if has css Transition?
19 console.log(AniX.support);

Changelog:

v1.3.2 (2020-03-09)

  • v1.3.2

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