AniJS

A Library to Raise your Web Design without Coding

At a glance

Handle CSS3 Animations

If click, On Square, Do flipInY animation To Container Boxes,

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Build UI Components

TabBar

Accordion

Modal

Menu

Notification

ScrollReveal

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.

Advantages

Better integration between coders and designers. | Easy to use
Speed of development. | Around 9.0kb after gzipping
There is no need for third party libraries.

“There is one more thing ...”

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

Installing

Using

* Include the AniJS library.

<script src="anijs-min.js"></script>

* Optionaly you can include some CSS animation definitions.

<head>
    <!-- Animate.css library -->
    <link rel="stylesheet" href="http://anijs.github.io/lib/animationcss/animate.css">
</head>

* Start playing by adding data-anijs 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: mouseover, on: body, do: swing animated">
        if: load, on: window, do: swing animated
    </div>
    <footer>
        footer
    </footer>
    <script src="anijs-min.js"></script>
</body>

See a Codepen Example.

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