https://github.com/adajuly/AniX

🐿 Super easy and lightweight(<3kb) JavaScript animation library
https://github.com/adajuly/AniX

3kb animation-libraries css-transitions jquery-animation motion transition

Last synced: about 2 months ago
JSON representation

🐿 Super easy and lightweight(<3kb) JavaScript animation library

• Host: GitHub
• URL: https://github.com/adajuly/AniX
• Owner: adajuly
• Created: 2017-05-11T01:02:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-03-10T14:37:09.000Z (over 2 years ago)
• Last Synced: 2024-04-12T16:33:44.680Z (6 months ago)
• Topics: 3kb, animation-libraries, css-transitions, jquery-animation, motion, transition
• Language: JavaScript
• Homepage: https://adajuly.github.io/AniX/
• Size: 2.01 MB
• Stars: 259
• Watchers: 11
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-star-libs - a-jie / AniX

README

        


  



 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](https://adajuly.github.io/AniX/).

![code](https://raw.githubusercontent.com/adajuly/AniX/master/logo/code.png)

## Install and Include

#### Install and Import anix.

```bash

$ npm install anix --save-dev

...

import { AniX } from 'anix';

```

#### Use the umd version [anix.umd.js](https://github.com/adajuly/AniX/blob/master/dist/umd/anix.umd.js). Check out the [UMD](https://github.com/umdjs/umd) repository for more details.

```html

```

#### Use jQuery plugin [anix.jq.js](https://github.com/adajuly/AniX/blob/master/dist/jq/anix.jq.js), that supports chain syntax.

```html

```

## Usage

#### Basic usage.

```js

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](https://github.com/adajuly/AniX/blob/master/dist/jq/anix.jq.js)

```js

$('.demo')

  .css({ left: '0px' })

  .to(0.5, {

    left: '500px',

    'background-color': '#ffcc00',

  });

```

#### Use in react(v16+)

```js

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 (

      


        


        

      

    );

  }

}

```


## Why?

There are a lot of animation libraries Why use AniX?

- First of all, it is very small and 3kb (gzip) is very suitable for use on the mobile page (because there is a requirement for size).

- Secondly, Anix directly uses native css animation properties, which is very high performance.

- Good compatibility, after a lot of real machine tests, good performance. Includes a variety of android devices

## Documentation

#### General documents please visit [https://adajuly.github.io/AniX/](https://adajuly.github.io/AniX/)

#### jQuery plug-in documents are as follows

```js

//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

```bash

git clone [email protected]:adajuly/AniX.git

npm install

npm run all

```

#### build jquery or umd version

```bash

npm run jq

npm run umd

```

#### demo example (the document page) is used [create-react-app](https://github.com/facebookincubator/create-react-app)

```bash

cd ./example

npm install

npm start

npm run build

```

Then open [http://localhost:3000/](http://localhost:3000/)

#### Use test cases

view the `./test/test.html`

## Other

There are other versions here, of course, they are not necessary. [React version](https://github.com/adajuly/react-anix) and [Vue version](https://github.com/GeoffZhu/vue-anix)...

## License

[The MIT License](https://opensource.org/licenses/MIT).