Jump to content
Search Community

gsap utils random

Andy1708 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 2
  • Thanks 1
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...