jQuery: smooth animate font-size change on scroll

Question

I have a jQuery animation function set-up to change the font size of the .header-wrap text when the document scrolls beyond 50px. This works, I'm not so keen on the solution I've got though, it's not very smooth, ideally I'd like the font-size to change smoothly as you scroll down the page, instead of having to stop scrolling the re-initiate the animation etc. It's just a bit jagged.
jsFiddle demo: http://jsfiddle.net/cXxDW/
HTML:

<div class="content-wrap"></div>
<div class="header-wrap">hello
    <br/>hello
    <br/>hello
    <br/>
</div>

jQuery:

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".header-wrap").stop().animate({
            fontSize: '17px'
        });
    } else {
        $(".header-wrap").stop().animate({
            fontSize: '25px'
        });
    }
});

Any suggestions / better, smoother solutions to the one I've got are more than welcome and greatly appreciated!

Solution

You wont get a very smooth animation of fontSize. But if you only need compatibility with modern browsers you could animate zoom instead.

You would have to fix your margins and positioning since those will be animated as well.

Here is a proof-of-concept fiddle.

Comments

[user1374796]

cheers for the suggestions—close but not quite right, still doesn't animate on scroll, only animates when you stop scrolling