🐿Super easy and lightweight(<3kb) JavaScript animation library
Clone or download
a-jie update readme
update readme
Latest commit e204777 Jan 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update v0.3.1 Dec 2, 2017
example update bootstrap Oct 1, 2018
logo add code Feb 27, 2018
scripts Update any file May 25, 2017
src update v0.3.1 Dec 2, 2017
test Update any code May 25, 2017
.gitignore Update any code May 16, 2017
README.md update readme Jan 20, 2019
package.json update v0.3.1 Dec 2, 2017
tsconfig.json add v0.2.1 May 21, 2017
tslint.json add v0.2.1 May 21, 2017

README.md

logo

AniX - A super easy and lightweight javascript animation library.

Overview

AniX is a lightweight and easy-to-use animation library with excellent performance and good compatibility for modern browsers.

It uses the native css transition attribute, better than js simulation animation performance. And you can also enable hardware acceleration with it.

AniX only less than 3k(gzip) in size. It achieves almost the same effect as any other huge library of animations.

View demo, please click here.

code

Install and Include

Install and Import anix.

$ npm install anix --save-dev
...

import { AniX } from 'anix';

anix

Use the umd version anix.umd.js. Check out the UMD repository for more details.

<script src="./js/anix.umd.ts" type="text/javascript"></script>

Use jQuery plugin anix.jq.js, that supports chain syntax.

<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/anix.jq.js" type="text/javascript"></script>

Usage

Basic usage.

AniX.to(dom, 1, {
    x: 300,
    y: 10,
    scale: 2,
    delay: 0.5,
    onComplete: function(){
      	alert("over");
    }
});

// or 
AniX.to(dom, 1, {
    "width": "200px",
    "background-color": "#ffcc00",
    "ease": AniX.ease.easeOutBack,
    "onComplete": () => {
        //STATE : COMPLETED!
        console.log("STATE : COMPLETED!");
    }
});

jQuery plug-in usage anix.jq.js

$('.demo').css({'left':'0px'}).to(.5, {
    'left': '500px',
    'background-color': '#ffcc00'
});

Use in react(v16+)

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler(e) {
        const node = this.myRef.current;
        // animation
        AniX.to(node, 1, {
            x: 300,
            y: 10,
            scale: 2
        });
    }

    render() {
        return (
            <div>
                <div ref={this.myRef} />
                <button onClick={this.clickHandler}></button>
            </div>
        );
    }
}

Documentation

General documents please visit https://a-jie.github.io/AniX/

jQuery plug-in documents are as follows

//like AniX.to
$(..).to(time: number, args: {ease?:string; delay?:number; [propName:string]:any;})

//like AniX.fromTo
$(..).fromTo(time: number, fromArgs: Object, toArgs: Object)

//like AniX.kill
$(..).kill(complete?: boolean)

//like AniX.get
$(..).getTransform(param: any)

//like AniX.ease
$.ease.easeOut

Test and Build

install and build all task

git clone git@github.com:a-jie/AniX.git
npm install
npm run all

build jquery or umd version

npm run jq
npm run umd

demo example (the document page) is used create-react-app

cd ./example
npm install
npm start
npm run build

Then open http://localhost:3000/

Use test cases

view the ./test/test.html

Other

There are other versions here, of course, they are not necessary. Angular version, React version and Vue version...

License

The MIT License.