animate-prop

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

// 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

// 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

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

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

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

Sequence tweens

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

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

With browserify

npm install --save animate-prop

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

API

animateProp(object, propertyName, finalValue, duration[, easing[, callback]])

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