Jump to content
Search Community

Blurred image on scale

Art2B test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.

 

:)

  • Like 3
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.
×
×
  • Create New...