[Snippet] - DOM Tween

[WombatTurkey]

This is a small little snippet I made to use Phaser's built in tweening library instead of including a whole other system to tween DOM elements. 

 DT = function(object, tweendata, time, easing) { 	var temp1 = Object.keys(tweendata); 	var temp = {} 	for (var i in temp1) { // Loop through the properties just in case there is multiple  		var a = temp1[i]; 		temp[a] = parseInt(object.style[a]) || 0; // Create the temporary object,  and convert the "100px" values into integers to be tweened properly through Phaser's Tween Method 		                                     //^ - We add a zero here, incase the css property does not have a current value 	} 	var fonzy = game.add.tween(temp).to(tweendata, time, easing, true); // Send these properly created objects through 	fonzy.onUpdateCallback(function(tween, value, tweendata) { 		var cV = tweendata.parent.target; 		for (var i in cV) { // Loop through them turkeys 			var a = cV[i]; 			object.style[i] = a + 'px'; 		} 	}); 	return arguments; }

Minified:

DT=function(a,r,t,e){var n=Object.keys(r),v={};for(var o in n){var s=n[o];v[s]=parseInt(a.style[s])||0}var c=game.add.tween(v).to(r,t,e,!0);return c.onUpdateCallback(function(r,t,e){var n=e.parent.target;for(var v in n){var o=n[v];a.style[v]=o+"px"}}),arguments};

Usage:

DT(document.querySelector('#AnyHTMLElement'), {height: 255, width: 500}, 2000, Phaser.Easing.Cubic.Out);

Couple things to note:

1) Chaining is not really possible through this w/o modification, use it for basic little dom tweens.  

2) Basic css tweens that have integers will only work (for example, font-weight:bold to italic will not)

3) Feel free to improve it and post here, i'll update the post!

 

--Hope someone finds it useful, I know I will for my DOM UI