Issue regarding gsap.utils.random with reusable function

[benoit958]

Hello !

 

I'm facing a little issue using gsap.utils.random.

I'm trying to randomize height and width of boxes on each repeat and appending "%"  sign to use percentage.

 

Here is what I noticied : i can't use  AND append some string.

Is this a bug or am I missing something ?

    width:  gsap.utils.random(0, 20) + "%", // working
    // width:  gsap.utils.random(0, 20, true), // working
    // width:  gsap.utils.random(0, 20, true) + "%", // not working

 

I've made a codepen exemple : 

See the Pen qBwgPqR by mi-re (@mi-re) on CodePen

[Rodrigo]

Hi,

 

That is to be expected actually. When you pass a true argument in the random utility method, what is returned is a function that has to be called, without it what's returned is a number:

typeof gsap.utils.random(0, 20) // -> Number
typeof gsap.utils.random(0, 20) + "%" // -> String - Coerced into a string

typeof gsap.utils.random(0, 20, true) // -> Function
typeof gsap.utils.random(0, 20, true) + "%" // -> ....?? I quit!

What you can do is something like this:

width:  () => gsap.utils.random(0, 20, true)() + "%"

But I don't really see any upside between using that one ☝️ instead of this:

width:  gsap.utils.random(0, 20) + "%",

Finally you can use the Unitize utility as well:

https://gsap.com/docs/v3/GSAP/UtilityMethods/unitize()

 

Hopefully this helps.

Happy Tweening!

[benoit958]

Thank you Rodrigo, 

the thing is if I'm doing that 

width:  gsap.utils.random(0, 20) + "%",

width is calculated just once and not on each repeat cycle.

 

but this is working, thanks

width:  () => gsap.utils.random(0, 20, true)() + "%"

 

[GreenSock]

That seems a little more verbose than necessary: 

// LONG
width: () => gsap.utils.random(0, 20, true)() + "%"

// SHORTER
width: () => gsap.utils.random(0, 20) + "%"

 

[benoit958]

Hello, yes but the second option doesn't recalculate width on each repeat.

 

I've updated the codepen sketch

 

 

 

[mvaneijgen]

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. 

 

To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it!

// From
height: gsap.utils.random(10, 100, true), // Is already a function 
width: gsap.utils.random(0, 100) + "%", // not a fucntion
    
// To
height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function 
width: () => gsap.utils.random(0, 100) + "%", // Convert to function 

 

Hope it helps and happy tweening! 

 

See the Pen XWQOGpa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[benoit958]

Haa, ok I get it now. Thanks !