Jump to content
GreenSock

Torben

Shaking centered text on parent width animation

Go to solution Solved by Rodrigo,

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

As you can se in the Codepen the centered text is shaking when the width of the parent element is animated.

Any ideas on how to fix that?

Link to comment
Share on other sites

Mhh, not sure if this can be fixed as it seems to me that this is a pure rendering issue and not GSAP related.

 

Turns out that the text element has a width of 100%, therefore whenever the parent's width changes, so does the text one. Since it also inherited the text-align property, the text get's centred independent of the width. So every time the parent width changes two things happens, the text element's width changes as well and the text gets centred to accommodate the new width, causing text moving to the right while the element's width increases.

 

I forked your pen and add made some changes, but nothing seems to work:

 

See the Pen JhzpG by anon (@anon) on CodePen

 

If you uncomment the first line, changing the ticker's fps, there's less or no shaking, but the animation looks quite hideous :mellow:, maybe someone else could chime in with a solution.

Link to comment
Share on other sites

I saw the same thing Rodrigo.. even removing the text-align center and adding fixed width and margin: 0 auto to the .text div didn't make a difference because of the width being animated. When text-align center is removed or set to left, then there is no jitter. This is definitely a browser text bug I have seen in various times, because the width is not animated on a sub-pixel level. So like Rodrigo said the new width changes on the element and the child text has to compensate to center.

 

The only thing i can thing of is fading out the text, then the width animates, and then fade back in the text.

 

See the Pen kGtlb by jonathan (@jonathan) on CodePen

 

It might not be what your after but i tried my usual text font jitter fixes and none of them working due to what Rodrigo described.

 

:)

Link to comment
Share on other sites

  • Solution

Aha!!!!, Jonathan gave me an idea :idea: (Thanks dude!!!)

 

Turns out that the CSS Plugin rounds the values by default, since Jonathan mentioned that there's no sub-pixel animation it came to me the autoRound:false property in the config object mentioned in the docs:

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

Go to the bottom of the page. This code works better:

TweenLite.set(".text", {xPercent:-100});

var tl = new TimelineLite()

tl.to("#redBox", 1, {left:'0px', width:400, autoRound:false});

The pen is updated:

 

See the Pen JhzpG by anon (@anon) on CodePen

  • Like 2
Link to comment
Share on other sites

NIce Rodrigo.. i was thinking and forgot about changing autoRound:false .. good thinking! :)

Link to comment
Share on other sites

Very nice Rodrigo - works beautifully  :-P

Thank you to you too Jonathan.

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