AniJS, UI Interaction Library for Web Designers in Plain English

At a glance

Click Square Demo

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

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

UI Components

TabBar

Accordion

Modal

Notification

ScrollReveal

Would you like to try it?

Interaction setting up good!!!

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

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

QuickStart Template

Fork on GitHub Download as ZIP

Demo

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 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: 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

Would you like to put your example here?

Please contact us :)

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

To Ana Silvia Tellería, Marisniulkis Lescaille, Rachel Nabors, Yolier Galán, René González, Julio Cañizares, Caridy Patino, Alberto Román and to all the persons that helped with this project.

AniJS