Image jitter when scaling

[stajic.srdjan92@gmail.com]

There is a slight jitter on parts of the image while scaling it. Usually parts with close rough edges or straight lines.

In codepen example you can see the jitter the most on the window on the left wall (middle of the window, white part near the latch), or on the wall background a bit.

 I am wondering if that is something that i can remove, so when the image scales it has more of a video feel. I was thinking that MotionBlurPlugin can help with that maybe (don't know how to test it for free tho)?
Any ideas on how to solve this?

Thanks.  

See the Pen XxoBYq by stajics (@stajics) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

As far as I know there is no Motion Blur Plugin for GSAP, unless a new plugin was released and I didn't even heard about it  

 

This issue is most related with the hardware than anything else. I'm pretty sure that with a last generation quad core machine with some solid GPU this wouldn't be a problem, while with a mid-range phone is more noticeable.

 

The main solution for this is make your animation shorter. If that is not an option you can use WebGL to render the image and animate it's scale:

 

http://www.pixijs.com/

 

GSAP has a PIXI plugin, so you can use that to easily animate the scale of a PIXI Sprite, although the scale of a PIXI display object can be animated directly with TweenLite, without the use of the plugin:

 

const mySprite = new PIXI.Sprite.fromImage("path/to/your/image.jpg");

TweenLite.to(mySprite, 10, {scale: 2});

 

Finally I'm curious of why you're using force3D: false in your pen, it should be true in order to send the layer to the GPU and perhaps get a better result:

 

TweenMax.fromTo("#img", 10, {
  transformOrigin:'50% 50%', scale:1
}, {
  scale: 2, ease: Power2.easeInOut, force3D:true
});

 

I've done a few things in PIXI, including long, full-screen image animations with very good results, so perhaps you can give it a try. Here you can find some examples to get you started:

 

https://pixijs.io/examples/#/basics/basic.js

 

Finally if you want to try the bonus plugins in CodePen here you can find the links to use them:

 

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

 

Happy Tweening!!

[OSUblake]

The browser does bilinear scaling using 2x2 sampling. PixiJS can do bicubic scaling using 4x4 sampling, which results in a much smoother scale. I explain a little about how to set up here.