animate-prop 

> Single, dependency-free function to tween a property. Use that on canvas or anywhere else.

This is a very simple and low-level function tween/animate/update a value over time. If you're looking for something that updates DOM elements directly, try the excellent but 60 times heavier TweenLite (+its CSS Plugin).

Originally from the article "Animation with HTML5 Canvas", where you can see more examples.

Usage

``js
// We'll animate the property x, starting from 5
var obj = { x: 5 };

// 10 is the final value that the property x will have after 1000 milliseconds
animateProp(obj, 'x', 10, 1000);

// use the object in your drawing loop
context.moveTo(obj.x, 100);
setInterval(function () {
// progressively draw a line
context.lineTo(obj.x, 100);
context.stroke();
}, 16); // don't use setInterval, it's just an example
`

You can provide an easing function

`js
// see https://github.com/jaz303/easiness/blob/master/raw.js
var easeInOutSine = function (progress) {
return Math.sin(Math.PI/2 * progress);
};
var obj2 = { scale: 1 };
animateProp(obj2, 'scale', 2, 300, easeInOutSine, function () {
console.log('Eased animation done!')
});
`

Or just wait for it to be done, without an easing

`js
var obj3 = { opacity: 0 }; // v--- easing:false = linear tween
animateProp(obj3, 'opacity', 0.5, 300, false, function () {
console.log('Linear animation done!')
});
`

Animate multiple properties with any duration

`js
var obj = { x: 5, y: 100 };

animateProp(obj, 'x', 10, 1000);
animateProp(obj, 'y', 300, 500);
`

Sequence tweens

`js
var obj = { x: 5, y: 100 };

animateProp(obj, 'x', 10, 1000, function () {
animateProp(obj, 'y', 300, 500);
});
`

With browserify

`sh
npm install --save animate-prop
`

`js
var animateProp = require('animate-prop');
`

API

$3

parameter | description
--- | ---
object | Type: object, required
The object with the property to tween
propertyName | Type: string, required
The property key to animate (e.g. 'height')
finalValue | Type: number, required
The final value that the property will have
duration | Type: number, required
The duration of the tween
easing | Type: function or boolean, default: linear
Given a number from 0 to 1, returns an eased number from 0 to 1 (optional)
callback | Type: function, default: none
Function to be called when the tween is over (optional)

Files

Here's an explanation of the files included in this repo

* index.js: source file, in ES6
* dist/animate-prop.js: browser-ready file with AMD or a global variable called animateProp
* dist/animate-prop.min.js: same as above, minified
* dist/animate-prop.node.js: used by node/browserify with require('animate-prop')
* dist/animate-prop.node.min.js: same as above, but minified, for byte counting only

Dependencies

No dependencies, but it needs window.requestAnimationFrame to be there (IE10+ or with polyfill)

Easing functions are not included. Provide your own or use easiness`

Used on

* http://away.gorving.com/ — canvas/video masking animation

License

MIT © Federico Brigante