gsap utils random

[Andy1708]

Hi there,

i have create this anemone animation with GSAP 3 and morphSVG plugin (codepen URL).

I would like to random the movement to make it more natural.

I have created this function to create 4 random value between 0.1 and 0.4 :

function onRepeat () {
    var random1 = gsap.utils.random(0.1, 0.4)
    var random2 = gsap.utils.random(0.1, 0.4)
    var random3 = gsap.utils.random(0.1, 0.4)
    var random4 = gsap.utils.random(0.1, 0.4)
    console.log( random1, random2, random3, random4)
  }

and i would like to use them with my 'start' label in my timeline like this :

'start+={random1}'.

How can i do that ?

mabe there is another way to achieve that ?

Thanks for your answer

Yves

See the Pen dyPqPKj?editors=0110 by YVES_V (@YVES_V) on CodePen

[GreenSock]

To answer your question specifically, that's just a JavaScript thing - you could do it like: 

 

var random1 = gsap.utils.random(0.1, 0.4);

"start+=" + random1; 

But I noticed that you could consolidate a lot of your code and you probably don't even need to do the whole "start+=" + random1 stuff. Remember, you can animate multiple targets in a single tween. I took a crack at giving you the more random feel here:

 

See the Pen 16e1c67875594e758b3b3dacde4fd20a?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It could be consolidated even further, like by creating a function that you feed each piece to and it creates the morph/rotation tween and adds it to the timeline, thus you don't have to repeat so much of that code. But I didn't want to stray too far from what you had and risk confusing things. 

 

Anyway, does that help? 

[Andy1708]

Thanks for cloning and take time to rewrite and improve the code Jack.

hope It will help some other people too !!!

you're the best

i will show you the whole animation when it's over…

Yves