AniX Save

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

Project README

A super easy and lightweight javascript animation library.


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.


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>


Basic usage., 1, {
  x: 300,
  y: 10,
  scale: 2,
  delay: 0.5,
  onComplete: function() {

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

jQuery plug-in usage anix.jq.js

  .css({ left: '0px' })
  .to(0.5, {
    left: '500px',
    'background-color': '#ffcc00',

Use in react(v16+)

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

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

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


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


General documents please visit

jQuery plug-in documents are as follows

$(..).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

Test and Build

install and build all task

git clone [email protected]:adajuly/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


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


The MIT License.

Open Source Agenda is not affiliated with "AniX" Project. README Source: adajuly/AniX
Open Issues
Last Commit
2 years ago

Open Source Agenda Badge

Open Source Agenda Rating