AniJS Studio, Easy web animation prototypes everywhere

Overview

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

Intuitive User Interface

You will be able to add animations with a few clicks and without dealing with javascript or css code.

Instant visual feedback

You can see all changes in real time, in a real enviroment while you're working.

Easily integration

You can easily integrate it with your existing code, just copy and paste actions.

It is based on the open source library AniJS , which is compact - around 7.7kb after gzipping, there is no need for third party libraries and supports all modern desktop and mobile browsers. You can find documentation and examples about it here.

Examples

Happy Google

Apple is Moving

Crazy Google Play

Respond to the challenge and submit your own examples and share them with other developers.

Usage

Open

To access the AniJS Studio, open a web page or web app in Google Chrome. Either:

Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools, or
Right-click on any page element and select Inspect Element.

The DevTools window will open at the bottom of your Chrome browser.

After that you could be see the AniJS Studio Panel, click to open it.

Adding Animations

To add the animations AniJS sintax are used. You can select this values inspecting current webpage or type directly into input boxes.

Save and Integration

1- Include the CSS animation styles definition, also you can download this from Animate.css

<head>
    <!-- Animate.css library -->
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
</head>

2- Put the AniJS file on your page or load it from the CDN.

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

3- Add the HTML Node below in some place of your page.

<input id="anijsdeclaration" type="hidden" data-anijs="">

History

For detailed changelog, check Releases.

Aknowledgement

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