Based on code from https://gist.github.com/paulirish/1579671
- Open bower.json
- Add
"easy-animate": "~1.3.0"to your dependency list - Run
bower install - In your application you can now add:
<script src="components/easy-animate/requestAnimationFrame.js"></script><script src="components/easy-animate/angular-animate.js"></script>
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
$nextFrame().then(function() {
// animate here
});or in the middle of a promise chain
$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
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
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent