Share Posted June 21, 2016 Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur See the Pen xOROEO by Art2B (@Art2B) on CodePen 1 Link to post Share on other sites
Solution Share Posted June 21, 2016 Hi Art2B Have you tried setting force3D to false? Please see if this works for you: TweenMax.to('.holder', 2, {scale: 3, top: 250, left: 300, ease: Power4.easeOut, force3D:false}) More info about force3D: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ Happy tweening. 3 Link to post Share on other sites
Share Posted June 21, 2016 Hello Art2B, That strange blur is a anti-alias browser bug within webkit based browsers. You either have to add force3d: false to disable the element from being put on it's own rendering layer for 3D hardware acceleration. OR You need to make the image the largest it will be, and then when you scale, scale only to a factor of 1. Since that same webkit bug will creep its ugly head in due to animating text or an image above a scale factor of 1. 3 Link to post Share on other sites
