Jump to content
Search Community

"Zooming" images appear pixelated whilst tweening

Mr Pablo test
Moderator Tag

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

Using GSAP 1.17.0, I am experiencing an issue where images that appear to "zoom in/out" (by changing their scale values), appear pixelated as they tween, then "snap" into focus when they stop.

 

Currently, this is happening on Android 4.x, when the HTML file is loaded into a WebView.

 

For the GSAP tweening, I am using Force3D: true.

 

Has anyone seen this happen before and have any possible solution?

 

Sadly, it is pointless making a Codepen, as it is platform specific (to Android).

Link to comment
Share on other sites

Aha, thanks for that!

 

Well, I tried setting "force3D" to false, and.... it hasn't helped my case sadly.

 

When set to false, an image (say 1000px square) that is scaled down (using CSS) then scales up over time, will still appear pixelated, AND stay pixelated when the tween ends,

 

I then tried setting force3D to true, same problem. The image that scales up, appears and stays pixelated.

 

Only with force3D: auto, does the image "snap" into focus after the tween.

Link to comment
Share on other sites

The best thing to do Mr Pablo is to set up a codepen .. because we can still access codepen from an Android device.

 

It will makes things easier to always setup a codpen so we can better help you, otherwise we wont be able to understand your issue!

 

Thanks :)

 

Problem with that is it is on a certain hardware configuration. On my Oneplus One phone, its OK, but on the Android "TV Box" I am using to test on, I get these issues.

Link to comment
Share on other sites

Well whenever you want to create a codepen we are happy to help. But unfortunately without a codepen example we wont be able to understand or see if we see the same issue.I presume the Android TV Box is displaying through the TV or Monitor, which is really not a standard device to test on due to the differences between mobile displays, desktop high rez monitors, and HDTV displays. So the pixel density will not be the same. For testing Android, actual mobile devices will give you accurate renderings vs a tv media box, even if it is Android. Since Android TV Box is not an Android mobile device or an Android tablet, its really not a standard mobile viewing device to go by when testing Android.

Link to comment
Share on other sites

That is due to having that render on the GPU, which puts that element on its own layer. Made into some type of bitmap for the GPU. And then when the element is finished animating it is removed from its own rendering layer. But this is a standard behavior with webkit. Android uses webklit. Webkit is notorious for really bad anti-aliasing of text and images using 3D transforms. Several months ago Google corrected this issue, and this blurry or pixelated rendering was fixed with perspective and transform-style: preserve-3d. But the bug is back in Mobile and Desktop Chrome.

 

The only thing you can do is probably just set force3D:false on that element, like what was described in Blakes link above. Unfortunately this is a Google and Apple webkit bug when using Hardware Acceleration (GPU), and not GSAP. There is a known z-axis bug even when at zero (0). That is why 3D transforms are affected by this only, and 3D transforms (3D uses z-axis) trigger the GPU rendering, which trigger this browser webkit bug.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi Jonathan, 

I'm a bit new at GSAP and was wondering if you could help with a bitmap scaling issue I'm having.

See the Pen ZbMqoG by Techture (@Techture) on CodePen

 

I've tried a few of the solutions people are writing about here in the forums, but my button is still pixelated.

Here's a link to view the file on my server. You can see the "BUY NOW" button at the end of the animation :)

 

Best,

Blake

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...