Jump to content
Search Community

Scale with text shaking the div

anotheruser 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

Hi , 

I have a div where there is a text , I am trying to scale the div , but when scaling the text is shaking , Is there anything i am doing wrong ? It looks like the text keep on jumping , but i have not applied any tween to the text at all . only to the parent div. I have tested in chrome , this issue is coming only in chrome is suppose , in firefox it seems to appear smooth , (not sure , sometime it glitches)

See the Pen OZpLmK by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

This is definitely a Chrome issue... :(

 

Adding will-change: transform to either the div or the span fixes the jitter, but makes the text become very blurry when it's finished scaling.

One solution (not a very convenient one) is to immediately change the font-size of the text at the start of the animation, and scale it down to make it appear as if it was still at its initial size, and figure out the transform values so that the position is the same, and then animate back to scale: 1. After that, you can remove the will-change property. But yeah, it's cumbersome, especially if you don't know exactly where the text will be beforehand.

 

See the Pen rvyOxK?editors=0010 by Acccent (@Acccent) on CodePen

(I've cleaned up a bit, btw)

  • Like 6
Link to comment
Share on other sites

@anotheruser, did you have a look at the demo in other browsers? It should look identical. There's no way to achieve absolute, perfect smoothness when scaling text, without converting it into an image first (and even then, I think you'd have a similar result to what I did – using scale and will-change basically does convert the text to an image before the transform, which is why it looks blurry if you scale it up).

 

If you do see significantly different results in Chrome and Firefox, maybe make sure the issue isn't with the version of Chrome you have installed?

  • Like 3
Link to comment
Share on other sites

From what i see, this is happening in Chrome. Firefox has very slight non-noticeable shake, but still looks smooth.

 

But Chrome seems to be shaking much more like a wobbly wave. But i think this is more of an issue with first setting up the elements and markup with all right transform supported CSS. I was able to stop the shaking in Chrome, but i had to remove your initial inline transform with subpixel values on your nested div tag, along with adding some other transform supported CSS properties. But was taking too long to debug.

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

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