
$fx - JavaScript animation library - jwilliams
http://fx.inetcat.com/
======
sam_in_nyc
I made a simple tween function a few months ago that has served me very well.
It modifies any property of an object that can be calculated using floating
point math (eg: it doesn't do hex colors). There's even a variable for what
type of tween (1 = linear, 2 = forgot-the-word, 3 = cubic). Every line counts.

    
    
            var tween = function(params, time, onFinished){
    		var setProperty = function(el, property, value, unit){
    			if (property=="style.opacity")
    				if (value==1) el.style.filter = "";
    				else el.style.filter = "alpha(opacity=" + value*100 + ")";
    			eval("el." + property + "='" + value + unit+ "'");
    		}
    
    		var start = function(){
    			var ticks = Math.ceil(time/10);
    			var getFn = function(percent){ return function(){go(percent);}; };
    			for (var i=1; i<=ticks; i++) setTimeout(getFn(i/ticks), i*10);
    			go(0);
    		}
    	
    		var go = function(percent){
    			var tween = 3; var u = Math.pow(2, tween-1);
    			percent = percent < .5 ? u*Math.pow(percent, tween) : 1-u*Math.pow(1-percent, tween);
    			for (var i=0; i < params.length; i++){
    				var data = params[i];
    				var value = data.start + (data.end-data.start)*percent;
    				var unit = data.hasOwnProperty("unit") ? data.unit : '';
    				setProperty(data.element, data.property, value, unit);
    			}
    			if (percent==1 && onFinished) onFinished()
    		}
    		
    		start();
    	}
    
    
    		//usage:
    		var props = [
    				{element: someElement, property: "style.left", start: 0, end: 100, unit: "px"}
    			];
    
    		tween(props, 450, function(){ alert('im done'); });

------
bprater
Amazing homepage.

That is _exactly_ how to demo your stuff in a way that gets people's
attention.

------
bprater
Mmm... I love seeing PNGs hard at work.

