Random rotation on each item

[ccccooooddddyyyy]

 

Hi guys,

It's my first time posting, how can I make each of my smily face SVGs rotate in random/separate direction like that.

See the Pen VwrXPEZ by ccccooooddddyyyy (@ccccooooddddyyyy) on CodePen

[Cassie]

Hey there @ccccooooddddyyyy

 

Welcome to the GSAP forums!

 

You can use a function to return a new random value for each circle

 

rotation: () => gsap.utils.random(-360, 360)

Have fun using the GSAP tools! Happy tweening!

[mvaneijgen]

What I would do is set the rotation to an initial value with .set() and then animate them to a random rotation.

 

I've set the random rotation to "random(-60, 60)" this will set their rotation to a number between -60 and 60 and set the animation to "random(['-=60', '+=60'])" this will animate them always to a fixed 60 degrees either way, but from their current position.

 

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

[ccccooooddddyyyy]

@Cassie thank you!

@mvaneijgen you really get ahead of me. Exactly what I'm looking for.

One more request, what if I want to make smiles rotate in an opposite degree of where it starts.
ex.
If smile 1 was set to -60deg, then it rotates back to 60deg.
If smile 2 was set to 60deg, then it rotates back to -60deg. 
**Note that every smile needs that randomness in degrees.

[mvaneijgen]

That will make it a lot more complicated.

 

You could try and make a function that handels that kind of logic, but maybe you then need to ask your self if the randomness is that important?

 

Because you could also just set the rotation by hand (first -60, second 40, third, -30, ect) and if you then implement this with  a wrap() function (https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()) then you know the order and can adjust the rotation accordingly. 

[GreenSock]

6 hours ago, ccccooooddddyyyy said:

If smile 1 was set to -60deg, then it rotates back to 60deg.
If smile 2 was set to 60deg, then it rotates back to -60deg. 

Do you mean like this?

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

 

rotation: (i, target) => gsap.getProperty(target, "rotation") === -60 ? 60 : -60,