Share Posted August 15, 2015 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 More sharing options...
Share Posted August 15, 2015 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 3 Link to comment Share on other sites More sharing options...
Share Posted August 15, 2015 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted August 15, 2015 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now