Random animations

[popland]

I got a (basic) screen overlay that on some clicks come from the left and cover the full page, it uses something like

var tl = gsap.timeline();

 tl.to('#fullmenu', { x: 0, duration: 0.2 });

 

Then i have a its closer, that basically move the overaly to the top out of the screen and reset it on the full left

var tl = gsap.timeline();

tl.to('#fullmenu', { y: '-100%', duration: 0.2 });

 tl.set('#fullmenu', { y: '0', x: '100%' });

 

I would like to have the closer animation to be a bit more "random", so that when it closes it could disappear moving to the top or the left, my first idea wast to make 2 closer function and randomize its usage (for example closeToTop() and closeToLeft()). But i was thinking if this could be the case to use the random GSAP function, so that the animation of the closer

tl.to('#fullmenu', { y: '-100%', duration: 0.2 });

 

could get a random to (y:'-100%' or x:'-100%' or even more if needed), can it be done? for example i tried with  an array like

 

const anim=gsap.utils.random(["y:'-100%'", x:'100%']);

 

and then use it like:

tl.to('#fullmenu',{anim, duration:0.2}

 

but it is not working, giving me the following error:

Invalid property anim set to x:'-100%' Missing plugin? 

or 

Invalid property anim set to y:'-100%' Missing plugin? 

 

any suggestion?

 

 

 

[Cassie]

Hey there @popland,

 

Your syntax is a little bit wonky here. Not entirely sure what your aim is but something like this maybe?
 

gsap.to(".class", {
  y:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5!
});

 

[popland]

Thank you @Cassie,

this will randomize the y (so it disappear moving to top or moving to bottom)

my goal i sto have it disappear to the left or to the top (disappearing to top  tl.to('#fullmenu', {y:'-100%', duration:0.2})and disappearing to the left tl.to('#fullmenu', {x:'100%', duration:0.2})), at the moment i am obtaining it by having two functions (one for each animation) and when i click the closing button i execute one of them at random. This is ok at the moment, but if i want to add a new closing animation i have to write a new function and so on, so i was thinking, can the "animation values" part of gsap (x:'100%' or even opacity:1) passed as a variable?

 

[popland]

i made a pen sample here:

See the Pen popJbYO by lenna-the-vuer (@lenna-the-vuer) on CodePen

 

its just the basic, as you can see, when you click the close, the overlay disappear on top or on left, based on a random number and an if statement, this is working but not so flexible, since if i need to add more options i need to make more numbers, increase the ifs, increase the tl.to animations...

 

so i wish i could use the GSAP random utils, to set the animations itself ("x:'100%", "y:'-100%", and more as needed) and passing the return value from the random to the tl.to itself

[mikel]

Hey @popland,

 

Could this be a solution for you?

With more than two options, random is also more fun.

 

See the Pen NWXqRqM by mikeK (@mikeK) on CodePen

 

Happy closing ...

Mikel

 

 

[popland]

Thank you @mikel

of course adding more option is always fun (and i really like the menu -> close text animation)

the solution you posted its very similar to mine, where you have a random label (i got a random number) and play the random labelled function

and its ok for most of the part, especially if the animation are really very different.

anyway if you want to add a menuToBottom (for example), you have to make a new timeline for it even if the differences are minimal (in my case, one is with a y animation and one is with a x animation)

so, having the animation itself as random return can be useful (for example i can have 'x:100' but also 'opacity:0' to switch from)

i hope my explanation make sense, i know it is a bit confused

in my mind a thing like

var val="x:-100%"
tl.to('#selector',{val, duration:1}) 

 

where val can be any animation value (x:-100%, opacity:0, y:100% and so on) gotten from a random, would be great

 

 

[Cassie]

Totally possible. But you have to work within the constraints that JS gives you!

You're currently trying to pass a string in to the vars  object, this won't work. You need to add another key value pair into this object. One way to do this is with the spread syntax

Here's an option...

 

let options = [{x:-200}, {opacity: 0}, {y: -200}]

let randomNumber = gsap.utils.random(0, options.length, 1)

gsap.to(elem, {
  duration: 1
  ...options[randomNumber]
})

 

Hope this helps!

[popland]

@Cassie

thank you, that's a good solution, probably the only one (even if i dont like spread operators in my code... they look so unclean!)

already tried in my project and it works perfectly

thanks again!