AniJS

Declarative handling library for UI interactions

A little demo

Click Square Demo

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>

Learn about it

Tab Bar

Github

Codepen

Reddit

If mouseover, On tab Do $removeClass active To Active tab

If mouseover, On tab Do $addClass active To target tab

<input data-anijs=
"if: mouseover, on: .tab, do: $removeClass active, to: .tab.active;
if: mouseover, on: .tab, do: $addClass active, to: target"

>

Learn about it

Would you like to try it?

Interaction setting up good!!!
If
On
Do
To

If some event(click, scroll, mouseover and more), On any element (css selector), Do some behavior(Rotate animation), To (any element).

Read more about here.

Installing

QuickStart Template

Fork on GitHub Download as ZIP

Install the component using Bower

$ bower install anijs

Using

Put the AniJS file on your page or use AMD. Also it can be loaded from the CDN.

<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">
        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
    </div>
    <footer>
        footer
    </footer>
    <script src="bower_components/anijs/dist/anijs-min.js"></script>
</body>

See a Codepen Example.

Advantages

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.

“There is one more thing ...”

Work well in iPad, iPhone, Android and the modern browsers. ;)

Documentation

Documentation Topics can be founded in the Wiki Pages.

Try AniJS Studio

AniJS Studio is a chrome extension that will allow you to create, test,
and add animations prototypes to any webpage, or web application easily.

Examples

History

For detailed changelog, check Releases.

Contribute

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.

Aknowledgement