Skip to content
A CommonJS wrapper for Animate.css for use with Browserify
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.gitignore
CHANGES.md
LICENSE
README.md
package.json

README.md

Animatify

SemVer License

A CommonJS utility for Animate.css for use with Browserify.

  • No dependencies.
  • Use in a modern browser.

Install

npm install animatify --save

Usage

var animate = require('animatify');

var element = document.querySelector('h1');
animate(element, 'bounceInUp', function () {
  animate(element, 'pulse');
});

Configure "dependencies" and "scripts" in your package.json:

"dependencies": {
  "animatify": "*",
  "animate.css": "*"
},
"scripts": {
  "build:css": "cp node_modules/animate.css/animate.css public/",
  "build:js": "browserify -o public/bundle.js .",
  "build": "npm run build:css && npm run build:js"
}

API

  • animate(element, animation[, opts][, callback]): Animates an element with the named animation and invokes the callback when done.
    • element: A DOM element.
    • animation: The name of one of the Animate.css animations.
    • opts: An object with any of these properties (defaults apply as defined by animate.css):
      • delay: A delay, e.g. '1s'.
      • duration: A duration, e.g. '1.5s'.
      • iterationCount: The number of iterations.
    • callback: A function that will be invoked once the animation finished.
  • animate.disable(): Disables animations and always invokes the callback immidiately. Useful for test runs or to allow disabling animations in your app.

Testing

$ npm install
$ npm test
$ open test/test.html

License

MIT

You can’t perform that action at this time.