png text scales down then it blurs.. how to prevent this

[dneckles]

When I scale the png text it blurs at the end is there anyway to preventing that from happening?

 

Username: gilenyabanners

Password: gilenyaBan1025

 

http://banners.rack.fcbstage.com/gilenya/Efficacy_banners_2/300x250/GilenyaHCP_Efficacy_300x250.html

 

On the last frame watch what happens when the phrase "disease activity" scales down. Its funky...

Anyway have any clues. I dont have codepen but the source is online.

 

Thanks

[Jonathan]

Hello alwayzambitious,

 

What you are describing are browser bugs, that have to do with the way text is rendered with CSS Transforms. There can be a number of things to do, but this type of issue will be really hard to debug without editing your code live.

 

Try:

• add force3D:true to your tweens with transforms and opacity (alpha and/or autoAlpha)
• adding perspective to the parent of the elements you are transforming
• or add transformPerspective to only the elements you are transforming
• adding transformStyle preserve-3d to the parent of the elements you are transforming
• or add transformStyle preserve-3d to only the elements you are transforming
• make sure that one of your parents has position:relative so the children elements that have position absolute know what parent they are relative to.

A limited codepen example will go a long way on debugging your code. Here is a nice video tut by GreenSock on How to Create a codepen demo example.

 

I hope this help!

[Carl]

Hi Dwayne,

 

Very nice banner. Great job!

 

When creating the CodePen demo we really just need to see a single tween that is affecting the png in question (not all the code and assets for the entire banner).

My gut feeling is that browsers are all going to shrink bitmaps in different ways and some pixelization / blurring is going to be unavoidable. 

 

However, if we can see a reduced test case we will be much better suited to offer a solution. Thanks!