Tween presets...

[Mr.Morton]

Hi, I am still learning til use TweenMax/Lite JS version.

 

I must say it is powerful stuff!

 

I've been trying to make some kind of tween preset, making it easier to reuse different tweens.

But being a mediocre Javascript programmer, I would like some advice.

 

Heres my first plan, which kinda works:

// TWEEN PRESET
sceneTransition_in_from_right = {
    duration: 0.7,
    tween_parameters:
    {
		left:"0",
		rotationZ: 0,
		scale:1,
		transformOrigin:"left bottom",
		onComplete: function(){alert('done');}	
    }
};

// CREATE TWEEN STRING
function tweenCreateParametersTweenString(parameters){
	tween_string = "";
	jQuery.each(parameters, function(name, value) {
		tween_string += name +": \""+value+"\", ";
	});
	tween_string = "{"+tween_string.substring(0, tween_string.length - 2)+"}";
	tween_string="TweenMax.to(obj,parameters.duration,"+tween_string+")";
	return tween_string;
}

// RUN TWEEN STRING USING EVAL
function tweenThis(obj,parameters) {
	tween_par_string = tweenCreateParametersTweenString(parameters.tween_parameters);
	temp_tween = eval(tween_par_string);
}

TWEEN WITH sceneTransition_out_from_righ preset
tweenThis(myObj, sceneTransition_out_from_right);

This works BUT the onComplete doesn't fire And I need this to fire. Can any of you smart guys help med make it work with onComplete and all other events.

 

Is there another better smarter way of reusing tween presets ?

 

 

Kind Regards

Morten

[jamiejefferson]

I think it's because you are wrapping all of the object values in " when you are creating your string, so you are turning your numbers and functions to strings as well. eval() in javascript is usually not recommended unless you really need it (1 2 3), and I can't see a good reason for needing it here, so we can just get rid of that to start!

 

Your setup for reusable transitions is pretty good though; you were so close to just creating the tweens directly from them:

// TWEEN PRESET
var sceneTransition_in_from_right = {
  duration: 0.7,
  tween_parameters: {
    left: "0",
    rotationZ: 0,
    scale: 1,
    transformOrigin: "left bottom",
    onComplete: function(){ alert('done'); }	
  }
};

// CREATE TWEEN
function tweenThis(obj, parameters) {
  var temp_tween = TweenMax.to(obj, parameters.duration, parameters.tween_parameters);
}

// TWEEN WITH sceneTransition_in_from_right PRESET
tweenThis(myObj, sceneTransition_in_from_right);

Check it out

See the Pen grDxj by jamiejefferson (@jamiejefferson) on CodePen

.

[Mr.Morton]

BRILLIANT!!! I did not know you could pass in parameters via array - I was so close .

 

Much better setup than creating a string and EVAL, more clean - I LIKE

 

Thanks alot...