Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kellyslater9000

Scaling + moving image causes stuttering

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
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.
×