Mesh rotation animation with random rotation limits

Hi guys,

I’m have some trouble getting the rotations of my meshes just right. I would like the mesh to rotate to a limit within a range. Then get a new random limit in the opposite direction and continue on like this into infinity. Basically, I want to make the mesh “Wiggle”:

window.setInterval(function(){wiggle(letter_p)}, Math.random() * 5000);			

function wiggle(mesh) 
{
	if (mesh) gsap.to(mesh.rotation,  
	{
		duration: "random(1.0,2.0)",
  	    x: "random(-1.0,1.0)",
    	y: "random(-1.0,1.0)",
        z: "random(-1.0,1.0)",
	})
};

This works, but with issues. First, the mesh rotates too much. I would prefer if the mesh only tilts slightly from side to side, so that it is never actually on it’s side or upside down or backside front. The other issue I have with this is that the animations to not flow into each other very nicely. I have a theory that if the animation were one continious event, the rotations would look much more natural.

So here are my questions:
How can I limit the rotations so the mesh is always facing generally forward?
Is there a better way to fire the event off once, and have it continue fluidly into infinity?

Thanks

Instead of random(-1.0,1.0) just do random(-0.5, 0.5) or any number smaller than 1 until you find the range of motion you like.

Instead of using an interval, just use GSAP’s onComplete property to call the same function again. You can read about it here in the docs under the " Special Properties" section. That way each time the tween is over, you’ll initiate a new tween.

1 Like

I called the wiggle function when the model loads. Then made this function:

function wiggle(mesh)
{

if (mesh) gsap.to(mesh.rotation,  
	{
	duration: "random(4.0,6.0)", //param = min/max values
	x: "random(1.2,2.2)",
	y: "random(-1.0,1.0)",
	z: "random(-0.2,0.2)",
	ease: "sine.inOut", //the ease you want dot in / out / inOut
	onComplete: wiggle,
	onCompleteParams: [mesh]
	});
	
};

And it worked perfectly. At first it didn’t work, because the onCompleteParams have to be in an Array even if you are just passing one parameter. So now it is initiated when the mesh loads and runs randomly into infinity. Thanks a million for your help, I appreciate it

1 Like