Scaling Text Issue

Hi,

I have been having a issue with a interaction scaling the text size from 1 to 100 to create a nice effect. Apple has done this a thousand times and seems like they having no issues at all. However I’m having the issue the text gets blurry when scaling up from 1 to 100.

Does someone know how to fix this?


Here is my public share link: ** https://preview.webflow.com/preview/talkpixels?utm_medium=preview_link&utm_source=designer&utm_content=talkpixels&preview=3d6d890ab5feda72d8df0b1e1d0b6d2c&mode=preview **

([https://preview.webflow.com/preview/talkpixels?utm_medium=preview_link&utm_source=designer&utm_content=talkpixels&preview=3d6d890ab5feda72d8df0b1e1d0b6d2c&mode=preview] [2])

Thanks a lot!

Kind Regards

Hmm, odd. I had thought text was like an SVG on webpages, I guess not – gets pixelated.

Maybe you should create the text in sketch or something and export it as an SVG, that shouldn’t pixelate when it scales.

Hi Jack,

Thanks for your help first of all ! I tried it with a .svg file without any luck. It still makes the image blurry at the end. I also tried to max out the size and swap the scaling proces from 0.1 back to 1.

Oh I see what you mean. Yeah that’s weird! Seems that the smaller the initial text is, the more pixelated it becomes at a bigger scale.

I tried it out of curiosity with an SVG though and that seems to work, here’s a video:

EDIT: new video, previous one had the beginning cut off

Yes it works for me also in the Webflow designer (preview state). But unfortunately it does not on the live website :slightly_frowning_face:

Oof, yeah you’re right. Odd. Sorry! Seems to be some type of browser issue, fixed with some custom code: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome