https://github.com/cotag/easy-animate
Request animation frame polyfil with optional AngularJS utility
https://github.com/cotag/easy-animate
Last synced: about 2 months ago
JSON representation
Request animation frame polyfil with optional AngularJS utility
- Host: GitHub
- URL: https://github.com/cotag/easy-animate
- Owner: cotag
- Created: 2013-09-23T23:58:26.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2014-07-10T12:32:25.000Z (almost 12 years ago)
- Last Synced: 2025-02-25T07:08:33.804Z (over 1 year ago)
- Language: JavaScript
- Size: 223 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# requestAnimationFrame polyfill
Based on code from https://gist.github.com/paulirish/1579671
1. Open bower.json
2. Add `"easy-animate": "~1.3.0"` to your dependency list
3. Run `bower install`
4. In your application you can now add:
* ``
* ``
## AngularJS Usage
The utility wraps a single call request animation frame in a promise that is resolved by the animation triggering.
Add `coAnimate` to your apps module dependancy list then use it as a service
```javascript
$nextFrame().then(function() {
// animate here
});
```
or in the middle of a promise chain
```javascript
$http.get(asset)
.then($nextFrame())
.then(function() {
// animate here
});
```
and when you want to animate based on data that may be updating multiple times per frame
```javascript
var runAnimation = $animation(function apply(position) {
this.position = position;
this.text = currentText(); // For example
}, function compute() {
buildScene(this.position, this.text);
});
$document.bind('scroll', function(e) {
// Will call apply every time scroll is triggered
// Will only call compute on animation frames
runAnimation(e.pos_x); // also for example
});
```