Passing variable values to function

[paulmak]

Hello,
Within a draggables snap "vars" you can pass the x and y values as  "endValue" to a function for processing, how would you do this with other variables?
 
For example:

TweenMax.to(target,1,{x:function(x){return x+10;}});
​or something like
TweenMax.to(target,1,{x:this.vars.x+10});

 
I'm aware you can use relative values such as "+=10", is there a way to pass the variable without referencing something like "target.position().left" (such for when "target" is an array)?


​Thank you.

[OSUblake]

It would help if could explain or show what you are trying to do with a CodePen demo.

 

But you can bind values to a function like this...

var someFunction = function(x, y) {
  // Do something
}.bind(null, 10, 20);

someFunction();

You can also use getters/setters to transform the value of a tween. GSAP can use both object and function based ones. The syntax might be a little weird if you've never used them, but here's a quick demo of different ways you could set them up.

See the Pen 6d42dd35adee8af8ce9c1bcf3f2e6cb2?editors=0010 by osublake (@osublake) on CodePen.

[paulmak]

Thank you for the quick reply, i'm not sure if im explaining it well.

note: translating X is just being used as an example for simplicity, any property would be applicable.

​var targetlist = $(".sometarget");   // this could be multiple targets, an array.
 

TweenMax.to ( targetlist, 1, { x : function( x ){  //insert unrelevant logic here    
return x;  } } );  // I would like to get the current x value and send it through a function.

​The x would be different for each targetlist[number].

 

 

​TweenMax.to( targetlist, 1, { x: (this.vars.css.x + 100) } );  // This does not work even though this.vars.css.x does return a valid value.

​TweenMax.to( targetlist, 1, { x : ( this.target.position().left + 100 ) } );   //nor does this work, this.target.position().left returns a valid value.
​

​Is there a way to do this without doing it like the following-

​var targetlist = $( ".sometarget" );
​var targetlistlength = targetlist.length;
​var newtarget='';
var targetx=0;
​for(var I = 0; I< targetlistlength;i++){
newtarget=$(targetlist[ I ]);
​targetx = newtarget.position().left;
// some logic done on targetx//
​TweenMax.to( newtarget, 1, {x: targetx } );
}

​I would like to do something similar as to what is seen in Draggable instead, for example:

​Draggable.Create( $(".sometarget"), { snap: { x: function(endValue){ return (endValue / 2 )  * 2 ; } , y: function(endValue) { return (endValue / 2) * 2 ; } }  } );

My goal is to simply tween a div background color(hsl format), increasing the hue by 120 every second, if hue goes over 360 I would like to subtract 360.

TweenMax.to( $(".mytargetdiv") , 1 , { repeat:-1, backgroundColor: function(backgroundColor){ backgroundColor[0]+=120;if(backgroundColor[0] > 360){ backgroundColor-=360;} return backgroundColor  } } );
//note: might need to process the backgroundColor value to strip an array[3] from the format hsl(x,y,z) and vise versa.

Is Draggable's snap just an exception or can this be done for tweenmax vars?

[OSUblake]

Yeah, that's exactly what the getters/setters are doing, but they can be confusing if you're not used to using them.

 

I think the cycle feature of a staggered tween is probably more what you're looking for. I set them to start at the same time, but of course you can change this in the last parameter.

See the Pen bad532edfed3409584b7ca31e71e9f12?editors=0010 by osublake (@osublake) on CodePen.