Declarative handling library for CSS animations
If click, On Square, Do flipInY animation To Container Boxes,
<div class="demo-square demo1" data-anijs="if: click, do: flipInY, to: .container-box"></div>
If focus, On name input Do wobble animation To paragraphs,
If animationend, On This paragraph Do hinge animation To pre tag below
<input id="name" type="text" data-anijs="if: focus, do: wobble, to: p">
If some event(click, scroll, mouseover), On any element (css selector), Do some behavior(Rotate animation), To (any element).
Read more about here.
Put the AniJS file on your page or use AMD.
<script src="anijs-min.js"></script>Include the CSS animation styles definition, we strongly recomend you to use the amazing animate.css library as starting point, this library provides beautiful animations. Also, you can define your own animations.
<head>
<!-- Animate.css library -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
</head>
Start playing by adding anijs-data tag to any HTML element.
<body>
<header data-anijs="if: click, do: flipInY animated, after: removeAnim">
header
</header>
<nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
nav
</nav>
<div id="main" data-anijs="if: load, on: window, do: swing animated">
if: load, on: window, do: swing animated, after: removeAnim
</div>
<footer>
footer
</footer>
<script src="bower_components/anijs/dist/anijs-min.js"></script>
</body>
See a Codepen Example.
Documentation Topics can be founded in the Wiki Pages.
For detailed changelog, check Releases.
AniJS is like a little girl, she needs hungry and foolish community people to grow up healthy. All your issues, pull requests and stars ;) are welcome.
To Ms. Ana Silvia Tellería, Ms. Marisniulkis Lescaille,Mr. Yolier Galán, Mr. René González, Mr. Julio Cañizares and to all the persons that helped with this project.