Skip to content
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
JavaScript HTML CSS
Branch: master
Clone or download
selfagency and gibbok wrong main in package (#6)
* fix main and add src

* unprettify

* add ./
Latest commit 225a718 Jun 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Add build version 1.0.3 May 7, 2017
src Add build version 1.0.3 May 7, 2017
test Add test comparison May 6, 2017
.editorconfig Add editorconfig Nov 30, 2016
.gitignore Add ignores Dec 19, 2016
.jscsrc Add utilities Dec 19, 2016
.jshintrc Add utilities Dec 19, 2016
LICENSE Initial commit Nov 30, 2016
README.md Add build version 1.0.3 May 7, 2017
bowe.json Add jshint module Jan 15, 2017
gulpfile.js Add rename animate.js to animatelo Jan 15, 2017
notes.md Add notes. Nov 30, 2016
package.json wrong main in package (#6) Jun 28, 2018
usage.md Add build version 1.0.3 May 7, 2017

README.md

Animatelo

CDNJS version

Just-add-water Web Animations

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

This is a porting to Web Animation API of the fabulous animate.css project.

Check out all the animations here!

What is Web Animations API?

Web Animations API is a new JavaScript API for driving animated content on the web.

Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.

With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior.

With the Web Animations API, we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction.

Browser Support

Web Animations API features is available by default in Firefox 48+ and Chrome 36+. For other browsers there’s a handy maintained polyfill that tests for feature support and adds it where necessary.

The polyfill and Animatelo are supported on modern versions of all major browsers, including:

  • Chrome
  • Firefox 27+
  • IE10+ (including Edge)
  • Safari (iOS) 7.1+
  • Safari (Mac) 9+

Installation

To install via Bower, simply do the following:

$ bower install animatelo --save

or you can install via npm:

$ npm install animatelo --save

Basic Usage

Here's a simple example of an animation that flip a text in a <h1>.
Try it as a live demo.

<!-- Include the polyfill -->
<script src="//cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>

<!-- Set up a target to animate -->
<h1 id="hello">Hello world!</h1>

<!-- Animate! -->
<script>
    window.animatelo.flip('#hello');
</script>

Advanced Usage Documentation

More information and technical documentation on Animatelo can be found at Usage page.

License

Animatelo is licensed under the MIT license.

You can’t perform that action at this time.