Jump to content


Tween presets...

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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:

sceneTransition_in_from_right = {
    duration: 0.7,
		rotationZ: 0,
		transformOrigin:"left bottom",
		onComplete: function(){alert('done');}	

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)+"}";
	return tween_string;

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


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:

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

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.