5 ms·
$fx - JavaScript animation library
- bprater 18y agoAmazing homepage. That is exactly how to demo your stuff in a way that gets people's attention.
- bprater 18y agoMmm... I love seeing PNGs hard at work.
- deleted 18y ago[deleted]
- sam_in_nyc 18y agoI 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'); });