Blurred image on scale

[Art2B 0 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[Jonathan 5,176 Likes (Superhero)]

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.