Scaling text makes it blurry


Hello, I have an issue with scaling the text. When I try to animate scaling, it becomes blurry and pixelated. Does anyone have the same problem?


Here is my public share link: LINK
(how to access public share link)

and this is without scaling

I have the exact same problem. When I scale a div that contains text inside, everything gets blurry.

To achieve the desired effect, try

  1. Set the initial scale of the element to 0.5 when it is in the ‘normal’ state.
  2. Apply an interaction transform to scale the element up to 1 when the interaction occurs.

I use it on image mostly but I think this could do the trick here too.

hi @Florian_SCHNEIDER I would like only to mention that using scale on text is not recommended and you should avoid it. Anyway, here is another possible solution about how to instead using the scale() in Interactions UI (cross-browser issues as on Safari is text blurred) you should use hover Effects from Style UI that works across all major browsers (at least for me). Here is a short video of how it can be done.