Subtle font size animation over short distances wi

Question

I want to animate some text in a slow and subtle way. jQuery animations work with integer values, so if you want to animate a size over say 10px in two seconds, you see a series of small steps at five FPS which looks jerky.

Here's a jsFiddle that shows what I'm talking about.

I found a similar question about animating positions, but the top/left/etc properties are integral, and so the accepted answer says it's not possible. However font-size can be animated as a real number, if jQuery will spit real numbers out.

I will also want to chain together a series of such animations.

Any ideas?

Answer 1

jQuery animations are terrible. Look into another tweening solution that utilizes requestAnimationFrame technique or a better timing mechanism. Maybe try a tween lib like tween.js look at the Rome demo, nice slow moving clouds...

Answer 2

Right now, only firefox has support for sub-pixel rendering of fonts, so animations in other browsers will always snap to pixel.

Answer 3

Another option would be direct manipulations css transformations - here's an example (I only included webkit css to make it readable, but similar functions exist in all modern browsers). The "ease-out" property includes the fast-then-slow functionality you were aiming for. It's certainly smoother than what you've been able to get so far, but it's quite blurry - not sure if it's a trade-off you'd want to make. And as it's an experimental property, you'd still probably want your existing jQuery animation as a fallback for older browsers.

Answer 4

I had another look a the minimum point value which is visually recognisable. The smallest unit for pt I noticed change in was 0.2pt.

However, I noticed that when applying the change in steps of 0.2 points over a period of 1 millisecond per increment in a while loop that it still looked a little "laggy". May not if not running in jsfiddle though.

The point is that if you want to change the font-size smoothly by 10 points you must apply the change in steps of 0.2pt or 0.25pt or 0.5pt (what ever you find smoothest) at a time and you then must use an interval of 1 to stay smooth but you should not apply a different interval as otherwise the incremental steps are to small to notice and the whole animation ends up choppy again.

I think trying to force this 10pt change over 2 seconds will always look choppy no matter what framework you use, due to the lack of visual change on the font-size in the lower decimals.

This worked for me quite well:
(I'm not taking decreasing font-size animation into account in this example but that can be added off course)

function smoothAnimation($selector, startPoints, points){
    var increments = 0.2;
    var currentPoints = startPoints;
    var endPoints = currentPoints + points;

    while(currentPoints < endPoints){
        currentPoints += increments;
        $selector.animate({"font-size": currentPoints.toString() + "pt"}, 1, "swing");
    }
}

$('#msg').click(function() {
    $msg = $('#msg');
    $msg.animate({"font-size": "80pt"}, 400, "swing");

    smoothAnimation($msg, 80, 10);

    $msg.animate({"font-size": "40pt"}, 400, "swing");
});

DEMO - smooth(ish) font-size animation

To make it look smoother increase the increments value to 0.25 or even 0.5. Ones you have nice smooth step you can set the points to any other value and the animation stays smooth as long as you don't force a 2 second animation interval.