Scaling + moving image causes stuttering

[kellyslater9000]

I'm trying to scale an image down from 200% to 100% to the center of a div.

 

First I used the image as the background of the div, simply animating the backgroundSize with background-position: center;. This worked, but caused the image to heavily stutter during the animation in both Chrome and FF at least.

 

I then created a workaround and setting the initial image width and height to double the original size and setting the left: -25%; (also tried using translate() for this).

 

.windmolens {

    position: absolute;

    left: -277px;

    top: -40px;

    width: 1108px; /* original image size is half of this */

    height: 160px; /* original image size is half of this */

}

 

NuonTl.to(background, 3.5, {width: "554px", height: "80px", left: 0, top: 0})

 

Result: http://comheroes.nl/nuonbanners/728x90/

 

With this code I have the stuttering in Chrome, FF and IE11.

 

There's no stuttering if I leave out the positioning (left, top animation)..

 

Any tips?

[Diaco]

Hi kellyslater9000 

 

pls make a Codepen Demo available for your questions :  How to Create a CodePen Demo

 

and pls try like this : 

See the Pen GJLVQq by MAW (@MAW) on CodePen

[Shaun Gorneau]

The trick here is to scale (rather than tween the height and width) and tween the x/y properties (rather than top/left). 

See the Pen GJLVxj by sgorneau (@sgorneau) on CodePen

[kellyslater9000]

Thanks guys!

 

It's amazing how to get 2 very useful responses in under 45 minutes. And that on a Saturday haha!

 

Sorry for not providing a codepen demo, will do so in the future.

 

Diaco's code does the trick. But in addition I learned 2 new things: use x/y rather than top/left and to use rotationZ:0.01 on scale tweens.

You guys are awesome. Have a great weekend!