function-based values question

[Matt Hoover]

Hi, I'm wondering something about the function-based values feature in TweenMax.

 

If I put in an anonymous function for a value, say the x parameter in a Tween, it works.

 

But if I put in a named function instead (that's defined elsewhere in the page), it breaks. It seems like it should work because the function is returning the same value.

 

I'm just looking for an easy way to randomize initial values in a "from" tween. I don't want to keep entering in the randomization function for every parameter passed to TweenMax...a better workflow is of course to define one randomization function and then call it for each parameter where it's needed, like:

 

TweenMax.staggerFrom(_titleChars, .5,   { opacity:0, 

                                        x:randomBetween(-500,500),

                                        y:randomBetween(-500, 500),

                                        ease:Power3.easeOut,

                                        delay:.7}, 0.1);

    

function randomBetween(min,max){

    return Math.floor(Math.random()*(max-min+1)+min);

  }

 

Is there a way to do this that I'm not seeing? I have that feeling like I'm just missing a tiny bit of info here.

 

Any help is appreciated!

 

thanks,

matt

 

[GreenSock]

The problem in your example is just that you're not assigning a function at all to the values - you're calling a function immediately and returning a number that's getting assigned. In other words:

x: randomBetween //assigns the function itself
x: randomBetween(-500,500) //calls the function immediately and assigns the returned value

A solution would be to just make a generator function that spits back a function that has those variables in a closure:

//notice this function returns a function!
function randomBetween(min, max) {
    return function() {
        return Math.floor(Math.random()*(max-min+1)+min);
    }
}

//then, in your tween...
x: randomBetween(-500, 500)

So basically, all you have to do is make a change to your randomBetween() function and you'll be good-to-go. I hope that clears things up. 

[Matt Hoover]

Thanks Jack!  Amazing as always!  It works beautifully.

[Visual-Q]

Answered a question I had before I even had a chance to ask it. Thanks Jack!

[OSUblake]

Here's a collection of demos that use function-based values. Most of the functions I use are like Jack's example, a function that returns another function. 
http://codepen.io/collection/nVjkaB/
 
And each one separately...
 
Square distribution. 

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

 
Circular distribution.

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

 
Circular distribution, donut shaped.

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

 
Radial.

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

 
Spiral.

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

 
Grid.

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

 
Sample. Get random value from an array.

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

 
Lerp position.

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

 
Lerp color. More info about the gradient can be found in this thread.

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

 
Weighted random. Most of the dots will be gray, then blue, then red.

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

[Visual-Q]

 

 

Here's a collection of demos that use function-based values. Most of the functions I use are like Jack's example, a function that returns another function. 

 

Hugely helpful Blake as always. Especially the way you pushed the appended instances to an array for tweening. Really opened my eyes for thinking about how to get control over things, demonstrations of these kind of techniques are invaluable. 

 

Thanks.