Performant CSS Animation Manipulation Library - AniX.js

File Size: 326 KB
Views Total: 1543
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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)

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.