https://github.com/theswedishdev/animatecss-helper
A JavaScript helper for animate.css
https://github.com/theswedishdev/animatecss-helper
animatecss animation css helper javascript javascript-helper
Last synced: 7 days ago
JSON representation
A JavaScript helper for animate.css
- Host: GitHub
- URL: https://github.com/theswedishdev/animatecss-helper
- Owner: theswedishdev
- License: mit
- Created: 2017-02-27T17:25:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-04-14T20:42:29.000Z (about 5 years ago)
- Last Synced: 2025-10-21T19:59:00.958Z (7 months ago)
- Topics: animatecss, animation, css, helper, javascript, javascript-helper
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# animate.css-helper
## What is this?
A simple promise-based JavaScript helper for [Daniel Eden's](https://github.com/daneden) [Animate.css](https://github.com/daneden/animate.css). By including a small script you can animate certain DOM elements from JavaScript.
The script will add two classes; `animated` and the specified animation's name, when the animation is done these two classes will be removed from DOM elements to not cause a pain in the backside.
## Installing
```bash
$ git clone https://github.com/theswedishdev/animatecss-helper
```
## Usage
### Including it in your project
Include animate.css
```html
```
Include the script
```html
```
### Add animation to a DOM element
```js
document.querySelector("#demo").animateCss("tada").then(function(element) {
console.log("Done animating", element);
});
```
### Add animation to multiple DOM elements
```js
document.querySelectorAll(".demo").animateCss("tada").then(function(elements) {
console.log("Done animating", elements);
});
```
## License
[MIT](LICENSE) © [Joel Ericsson](https://github.com/theswedishdev)