Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mr.Morton

Tween presets...

Recommended Posts

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

Link to comment
Share on other sites

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! :lol:

 

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

.

  • Like 3
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×