A lightweight javascript animation library.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
.gitignore
README.md
jtween.min.js

README.md

#jTween

jTween is a lightweight javascript animation library.

##Features/focus :

  • decoupling between the properties to animate and the rendering function that is in charge of show these properties

  • lightweight

  • indipendent from any other library

##Simplest Example :

Create an engine :

var TW = new jTween();
TW.addProperty('x'); 

Get and extend target :

var target = document.getElementById('aaa');

//getter and setter
target._x = 0;
target.setX = function(x){
	this._x = x;
}
target.getX = function(){
	return this._x;
}

//render function
target.render = function(){
	this.style['left'] = this._x + 'px';
}

Start animation :

TW.addTween(target, {'duration':500,'transition':'easeOutSine', 'x':200});

See examples folder for more usefull examples.

##Complex properties :

In the case that the property to animate both complex and can not be represented with a linear and scalar value, through an appropriate function (step function) is possible to provide indications on how to transform the current calculated feed (a number from 0 to 1) to the value in the domain of the property.

We implement this function in the previous example :

//getter, setter and render
target._x = 0;
target.setX = function(x){ this._x = x; }
target.getX = function(){ return this._x; }
target.render = function(){ this.style['left'] = this._x + 'px'; }

//step function
target.getXStep = function(start, end, feed){
	return start + ((end - start) * feed);
}

In this example, with or without the step function we obtain the same result as we are using a linear and scalar property.

See example-color for a more usefull example demonstrating how to use a step function on a color domain (hex notation).