JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Super easy and lightweight css animation library
    Filed under 

    • 🔾23%Overall
    • 198
    • 9.2 days
    • 🕩11
    • 👥4

    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';
    

    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.

    Show All