css-animation-anix-js

(<3kb)🐿 Super Easy and Lightweight JavaScript CSS Animation Library | AniX.js

by

AniX is a lightweight and easy-to-use animation library with excellent performance and good compatibility with modern browsers. AniX is less than 3K (gzip) in size only. It achieves almost the same effect as any other huge library of animation.

Uses a native CSS transition theme, better than js simulation animation performance. You can also enable hardware acceleration with it.

css will change, css transition all performance, css animation faster, complex css animations, css animation thread

why?

There are a lot of animation libraries Why use AniX?

  • Firstly, it is very small and 3KB (gzip) very convenient to use on a mobile page (due to size requirements).
  • Secondly, Anix directly uses the properties of native CSS animation, which has a very high performance.
  • Good compatibility, after a lot of real machine testing, good performance. Includes a variety of Android devices

More advantages:

  • Available as a jQuery or vanilla JavaScript plugin.
  • It also works as a React component.
  • Compatible mode. Compatible with old browsers, old browsers do not have animations.
  • Use set the timeout or the CSS event that was moved.
  • Facilitation functions.

How to make use of it:

1. Install & import the AniX.js library.

# NPM
$ npm install anix --save

2. Or instantly embrace the AniX.js library within the doc.

<!-- As a Vanilla JS plugin -->
<script src="/path/to/dist/umd/anix.umd.js"></script>

<!-- As a jQuery plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jq/anix.jq.js"></script>

3. Animate a DOM aspect by altering the CSS properties.

// As a Vanilla JS plugin -->
AniX.to(element,.5,{
  height:"100px",
  // more CSS styles and options here
});

//  As a jQuery plugin
$('.element').to(.5, {
  'left': Math.random() * $(window).width() + 'px',
  'background-color': getRandomColor(),
  // more styles and options here
});

4. Animate a DOM aspect from one style to a different.

// As a Vanilla JS plugin
AniX.fromTo(element,.5,{height:"200px"},{height:"100px"});

// As a jQuery plugin
$('.element').fromTo(.5, {color:'#ffcc00'}, {color:'#000'});

5. Apply a delay to the animation.

AniX.to(element,.5,{
  height:"100px",
  delay:0.3,
  // more CSS styles and options here
});

6. Apply an easing function to the animation.

AniX.to(element,.5,{
  height:"100px",
  "ease": AniX.ease.easeOutBack,
  // more CSS styles and options here
});

7. Callback capabilities that will probably be fired on animation start/end.

AniX.to(element,.5,{
  height:"100px",
  onComplete: function(){
    alert("over");
  },
  onStart: function(){
    alert("start");
  },
  // more CSS styles and options here
});

8. API strategies.

// kill the instance
AniX.kill(dom);
$('.element').kill(complete?: boolean)

// get transform
AniX.getTransform(InputValue);
$('.element').getTransform(InputValue)

// use nativecss transtionend event
AniX.useTranstionEvent = true;

// Compatible with old browsers, old browsers do not have animation
AniX.compatible = true;

// Debug mode
AniX.debug = true;

// Check if has css Transition?
console.log(AniX.support);

All possible easing functions:

  1. linear
  2. easeBasic
  3. easeIn
  4. easeOut
  5. easeInOut
  6. easeOutCubic
  7. easeInOutCubic
  8. easeInCirc
  9. easeOutCirc
  10. easeInOutCirc
  11. easeInQuad
  12. easeOutQuad
  13. easeInOutQuad
  14. easeInQuart
  15. easeOutQuart
  16. easeInOutQuart
  17. easeInQuint
  18. easeOutQuint
  19. easeInOutQuint
  20. easeInSine
  21. easeOutSine
  22. easeInOutSine
  23. easeInBack
  24. easeOutBack
  25. easeInOutBack

Performant CSS Animation Manipulation Library, AniX Plugin/Github

See Demo And Download

Demo
Download

Official Website(drawcall): Click Here

This superior jQuery/javascript plugin is developed by drawcall. For extra Advanced Usages, please go to the official website.

Leave a Comment