Jump to content
GreenSock

Wiplash

Jerky small movements

Recommended Posts

Hi,

Firstly sorry, I know this has been asked before but I have tried to use force3d and it hasn't fixed the issue.

I have some code that makes an image jiggle, it just slowly wobbles on screen. The problem is the browser seems to be rounding off the pixels and creating this jerky motion. Has anyone found a solution to this.

Here's my code:-

 

function moveToRandom (target, startX, startY) {
		//alert(target + " " + startX + " " + startY);
		var randXshift = startX + getRandomArbitary(-5, 5);
		var randYshift = startY + getRandomArbitary(-5, 5);
		var randTime = getRandomArbitary(0.5, 2);

		TweenMax.to(target, randTime, {left: randXshift, top: randYshift, ease:Quad.easeInOut, force3D:true, onComplete: moveToRandom, onCompleteParams:[target, startX, startY]});
	}

Thanks a lot

Will

Link to comment
Share on other sites

Hi Will,

 

What you could try is animate translate properties instead of position properties. The translate properties values are not rounded so there will be sub pixel rendering.

TweenMax.to(target, randTime,
  {
    x: randXshift, y: randYshift, 
    ease:Quad.easeInOut, force3D:true, 
    onComplete: moveToRandom, 
    onCompleteParams:[target, startX, startY]
  });

The only caveat for this is that translate properties won't affect document flow, But if you don't need to keep document flow while animating the elements, then is OK.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Yep, Rodrigo is right-on. And for the record, this has nothing to do with GSAP - browsers round top/left values even if GSAP sets them to decimals. In almost every case, I'd recommend using x/y instead of top/left because they'll perform better. 

Link to comment
Share on other sites

Thanks for the answers, I have implemented it and can tell it is looking smoother already, but now I have another problem. All my startX and startY positions are now completely off.

 

function startP2Jiggle (){
	for(i=1; i <= p2_letters; i++) {
		var jigTarget = document.getElementById("p2_letter_" + i);
		var jigX = jigTarget.offsetLeft;
		var jigY = jigTarget.offsetTop;

		moveToRandom(jigTarget, jigX, jigY);
   	}
}

function moveToRandom (target, startX, startY) {
	//alert(target + " " + startX + " " + startY);
	var randXshift = startX + getRandomArbitary(-5, 5);
	var randYshift = startY + getRandomArbitary(-5, 5);
	var randTime = getRandomArbitary(0.5, 2);

	//TweenMax.to(target, randTime, {left: randXshift, top: randYshift, ease:Quad.easeInOut, force3D:true, onComplete: moveToRandom, onCompleteParams:[target, startX, startY]});
	TweenMax.to(target, randTime, { x: randXshift, y: randYshift, ease:Quad.easeInOut, force3D:true, onComplete: moveToRandom, onCompleteParams:[target, startX, startY]});
}

As you can see above in the function startP2Jiggle I'm sending the offsetLeft and offsetTop to moveToRandom. How do I go about changing these to get the x and y instead?

Thanks

Link to comment
Share on other sites

Worked it out. Turns out if I'm now tweening the X and Y I don't need to know where it's and and y was before.

 

function startP2Jiggle (){
	// alert("startjiggle");
	for(i=1; i <= p2_letters; i++) {
		var jigTarget = document.getElementById("p2_letter_" + i);
		moveToRandom(jigTarget);
  	}
}

function moveToRandom (target) {
	var randXshift = getRandomArbitary(-5, 5);
	var randYshift = getRandomArbitary(-5, 5);
	var randTime = getRandomArbitary(0.5, 2);

	TweenMax.to(target, randTime, { x: randXshift, y: randYshift, ease:Quad.easeInOut, force3D:true, onComplete: moveToRandom, onCompleteParams:[target]});
	}

That's a nice little jiggle function if anyone wants it x

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.
×