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.
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.
2 |
$ npm install anix --save |
1 |
import { AniX } from 'anix' ; |
2. Or directly include the AniX.js library in the document.
2 |
< script src = "/path/to/dist/umd/anix.umd.js" ></ script > |
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
08 |
$( '.element' ).to(.5, { |
09 |
'left' : Math.random() * $(window).width() + 'px' , |
10 |
'background-color' : getRandomColor(), |
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
2 |
AniX.fromTo(element,.5,{height: "200px" },{height: "100px" }); |
5 |
$( '.element' ).fromTo(.5, {color: '#ffcc00' }, {color: '#000' }); |
5. Apply a delay to the animation.
6. Apply an easing function to the animation. All possible easing functions:
- linear
- easeBasic
- easeIn
- easeOut
- easeInOut
- easeOutCubic
- easeInOutCubic
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInBack
- easeOutBack
- easeInOutBack
3 |
"ease" : AniX.ease.easeOutBack, |
7. Callback functions that will be fired on animation start/end.
03 |
onComplete: function (){ |
8. API methods.
03 |
$( '.element' ).kill(complete?: boolean) |
06 |
AniX.getTransform(InputValue); |
07 |
$( '.element' ).getTransform(InputValue) |
10 |
AniX.useTranstionEvent = true ; |
13 |
AniX.compatible = true ; |
19 |
console.log(AniX.support); |
Changelog:
v1.3.2 (2020-03-09)
This awesome jQuery plugin is developed by drawcall. For more Advanced Usages, please check the demo page or visit the official website.