Description
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 can use hardware acceleration.
AniX is less than 10k in size, and it does not change your coding habit as much as possible. There are multiple versions of the AniX option, umd version, jQuery version, Angular version, React version and Vue version...
AniX alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view AniX alternatives based on common mentions on social networks and blogs.
-
animate.css
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. -
GreenSock-JS
GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web -
barbajs
Create badass, fluid and smooth transitions between your website’s pages -
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
jquery.transit
Super-smooth CSS3 transformations and transitions for jQuery -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
shuffle-images
The Simplest Way to shuffle through images in a Creative Way -
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Tailwind Animations
Cool animations implemented with tailwindcss -
js-loading-overlay
Display loading overlay/spinner for your application easily and beautifully. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of AniX or a related project?
Popular Comparisons
README
Overview
AniX - 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>
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>
);
}
}
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://drawcall.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 [email protected]:drawcall/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. React version and Vue version...
License
*Note that all licence references and agreements mentioned in the AniX README section above
are relevant to that project's source code only.