Jump to content
Search Community

Text news ticker animation is not smooth

hackfin test
Moderator Tag

Go to solution Solved by Jonathan,

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

I am trying to put together a simple news ticker (see codepen link) and I noticed the text scrolling across the screen seems to be jittery.  Is there a GSAP method or some other plugin that I need to use to make the text animation more fluid?

 

Thanks,

 

James

Link to comment
Share on other sites

Have you tried changing "left" to "x"? Browsers always round top/left/right/bottom values to whole pixels, so even if GSAP sets them to precisely the correct value (e.g. 5.24875), the browser can only render it at whole pixels. Consequently, things can't be moved at the sub-pixel level - snapping to whole pixels can cause things to look jittery even though there's no performance problem at all. However, in most browser transforms can be rendered at the sub-pixel level, hence my suggestion to animate "x" instead of "left". 

  • Like 1
Link to comment
Share on other sites

I replaced all of my "Left:" with an "x:" but it did not help any.  The codepen sample has been updated.  It has to be something simple b/c all of the text animations on the site look great while all of my experimentations with text look terrible.

Link to comment
Share on other sites

Hello hackfin, along with x, I also added force3D:true and rotation:0.01 to your tweens.

My codepen example:

See the Pen vDhKE?editors=001 by jonathan (@jonathan) on CodePen

  • first i added force3D is part of the CSSPlugin which forces hardware acceleration for a smoother animation. In this case translate3d()
  • second i added rotation will make GSAP use matrix3d() .. the buttery GSAP goodness

After I did that it was much smoother in Firefox 31 on Windows 7

I hope this helps! :)

Link to comment
Share on other sites

It doesn't seem to be very jittery for me (well no more than I would expect), but if you add the lines below

TweenLite.set($list, {force3D:true});
TweenLite.set($clonedList, {force3D:true});
it will tell GSAP to use a 3D transform instead of 2D, which could improve the smoothness for you. However, I don't think you'll be able to get this to look 'perfect' because there is going to a pulsing/shimmering effect on the text due to ClearType.

 

You might be able to improve it by using a font with thicker strokes (bold?), or a different combination of text/background colors, but it's probably always going to show some amount of shimmering. The best way to get a 'perfect' effect would be to use an image of pre-rendered text instead and tween that.

 

 

(btw I'm not seeing any difference at all between translate3d and matrix3d in Chrome)

Edited by jamiejefferson
Link to comment
Share on other sites

Thank you Jonathan and Jamie!  Jonathan, I tried your codepen in in Firefox 31.0 and it still looks bad.  However, in Chrome 33.xx & IE 11 and looks as expected.  Problem solved. 

 

So to make sure I understand your posts, if resources are available or not a concern, using force3D of the CSS plugin is advisable to kick in hardware acceleration which translates into a smoother animation.  Also, could the TT font being used make a difference in quality?

 

Thanks, James

Link to comment
Share on other sites

  • Solution

This is a browser bug in Firefox when clearType is ON in Windows 7.

 

Jamie is right about clearType on windows 7. I only saw the differences in Firefox .. but IE and Chrome were both fine.

On my computer, Windows 7, I have clearType OFF.. which is the default setting on Windows. So when clearType is ON, it causes text rendering issues forcing clearType anti-aliasing, which can affect layout by increasing faux anti-aliasing letter spacing.

Firefox has a bug in it that allows clearType to affect font rendering, whereas chrome and IE don't allow the clearType to override rendering of browser text.

I will try to find that Mozilla bugzilla bug report again that describes this behavior, and why Firefox allows system clear Type to affect browser rendering.

You can test this by opening clearType option modal in Windows 7.. toggling clearType ON and OFF and watching Firefox text change on your web page and also affect page layout when clearType is on.

Try toggling clearType for Chrome and you will see how clearType won't affect the web page, like it does in Firefox.

 

This bug has been around awhile:

 

https://bugzilla.mozilla.org/show_bug.cgi?id=814101

https://bugzilla.mozilla.org/show_bug.cgi?id=818164

https://support.mozilla.org/en-US/questions/942265?page=4#answer-385326

 

Also having to do with Firefox about:config gfx.content.azure.enabled = false

 

https://support.mozilla.org/en-US/questions/952781

 

You will find more Mozilla Bugzilla reports if you do a Google search.

:)

  • Like 2
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.
×
×
  • Create New...