Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anotheruser

Scale with text shaking the div

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

Thanks for the demo.

 

See if adding a slight rotation to the div inside main helps

 

TweenMax.set(".main div", {rotationZ:0.01})

 

I think it does, but frankly I'm not sure I'm trusting my own eyes after watching it so many times

 

See the Pen BxWyLx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Yeah I tried that after seeing your other post , But unfortunately Am seeing the same jumping text thing :(

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

Hi @Acccent. I have tried your method , it still appears shaky to me , Even in your demo :(

Link to comment
Share on other sites

Chrome has admitted there are rendering bugs that affect situations like this - it has nothing to do with GSAP. You can try setting force3D:false and add a slight rotation. That seemed to clear things up mostly (for me at least). @Acccent's demo seemed pretty smooth as well.

 

  • Like 3
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...

Is there any update on this topic ? Still my text is glitching 

 

I have read the detailed blog about will change written by Carl i think , But still not sure how to fix this issue

Link to comment
Share on other sites

1 hour ago, anotheruser said:

Is there any update on this topic ? Still my text is glitching 

Please create a minimal demo using CodePen if you'd like help. It'd be good to start a new thread :) 

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