AniJS – Declarative handling library for CSS animations

anijs

AniJS is a declarative handling library for CSS animations. Created by @dariel_noel

Features

  • Easy to use.
  • Compact – around 7.7kb after gzipping.
  • There is no need for third party libraries.
  • Speed of development.
  • Better integration between coders and designers.
  • Supports iPad, iPhone, Android and all the modern browsers

Usage

Add the script the head of the document and also include Animate.css library or any CSS animation styles.

<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
<script src="anijs-min.js"></script>

And now add anijs-data tag to any HTML element.

<body>
    <header data-anijs="if: click, do: flipInY animated">
        header
    </header>
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
        nav
    </nav>
    <div id="main" data-anijs="if: DOMContentLoaded, on: document, do: swing animated, after: holdAnimClass">
        if: DOMContentLoaded, on: document, do: swing animated
    </div>
    <footer>
        footer
    </footer>
    <script src="bower_components/anijs/dist/anijs-min.js"></script>
</body>

Codepen Example