Question

I’m trying to animate text with RaphaelJS, but I’m encountering a choppy animation (“judder”?). I’ve looked around for other issues regarding this, but I’ve only been able to find jQuery-specific or non-SVG topics so far. Please let me know if I overlooked a similar question!

Essentially, I’m attempting to visually wrap a text element in a rect element and translate them simultaneously through an animation. I know about the ‘g’ element, but I don’t want to use it since older versions of Internet Explorer don’t support it. Instead, I’m using separate Raphael animations for the text and the rectangle:

var raphRect = paper.rect(
    (paperWidth/2)-rectWidth/2
    ,paperHeight-rectHeight
    ,rectWidth
    ,rectHeight            
    ,rectHeight/2
)
...
,raphText1 = paper.text(
    paperWidth/2
    ,paperHeight-(2*fontSize)
    ,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');

I’m assuming that the judder is caused by rounding pixels in each animation frame for the text element. Is there any way to mitigate or prevent this judder? (Reducing the animation time is not an option…and it doesn’t even look like it helps.)

(I have an example of what I’m trying to do here. I’ve included two lines of text and a bold stroke for the rect to emphasize the judder.)

Answer 1

This idea is actually borrowed from Robert Longson’s information about the text-rendering property. It’s true that Raphael doesn’t provide direct access to this functionality, but it does provide you with a link to the dom node — so it is but a second step to apply this style yourself, and it does indeed produce better results in Firefox at least.

Using jquery:

$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );

Staged here.