https://github.com/bendc/animate
Simple animation library
https://github.com/bendc/animate
Last synced: about 1 year ago
JSON representation
Simple animation library
- Host: GitHub
- URL: https://github.com/bendc/animate
- Owner: bendc
- License: mit
- Created: 2015-01-26T09:47:14.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-04-02T05:39:01.000Z (over 11 years ago)
- Last Synced: 2025-04-09T15:09:05.099Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 161 KB
- Stars: 423
- Watchers: 25
- Forks: 23
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Animate
`animate.js` is a tiny library that helps you write smooth CSS-powered animations in JavaScript. See
a quick demo of 500 elements animating at
[playground.deaxon.com/js/animate](http://playground.deaxon.com/js/animate/).
# Usage
Include `animate.min.js` in your page:
```html
```
Start animating things:
```javascript
animate({
el: "div",
translateX: 100,
opacity: .5,
duration: 500,
complete: function() { alert("Done!") }
});
```
# API
`animate` requires a config object accepting the following options:
## el
The elements you want to animate. `el` can be a:
* CSS selector
* DOM element
* array of DOM elements
* NodeList or HTMLCollection
## duration
[Optional] The duration of your animation in milliseconds. Default: 400. `ms` will be added if you don't specify a
unit.
## delay
[Optional] The delay before your animation starts in milliseconds. Default: 0. `ms` will be added if you don't specify a
unit.
## easing
[Optional] The animation curve (CSS keyword or cubic-bezier). Default: ease.
## complete
[Optional] A function called at the end of the animation. Inside the function, `this` refers to the
DOM element that has finished animating.
## animatable properties
* opacity
* translateX
* translateY
* translateZ
* scaleX
* scaleY
* scaleZ
* rotateX
* rotateY
* rotateZ
* skewX
* skewY
* perspective
You can also use the shortcut transform functions `translate`, `scale` and `rotate` when the same
value should be applied to X and Y:
```javascript
translate: 100 // same as translateX: 100, translateY: 100
```
If you don't specify a unit, `px` will be added to `translate`-related and `perspective` functions and `deg`
to `rotate`-related functions.