Jump to content
Search Community

Passing variable values to function

paulmak test
Moderator Tag

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

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

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.

Link to comment
Share on other sites

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);


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

  • Like 1
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

  • Like 2
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.
  • Create New...