Thin animation of font size over short distances with long duration in jQuery

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 the size of, say, 10px in two seconds, you'll see a series of small steps in five FPS that look jerky.

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

I found a similar question about position animation, but the top / left / etc properties are inalienable, and so the accepted answer says that this is not possible. However, font-size can be animated as a real number if jQuery spits out real numbers.

I also want to combine a series of such animations.

Any ideas?

Answer 1

Another option would be to directly manipulate css conversions - here is an example (I only included webkit css to make it readable, but similar functions exist in all modern browsers). The “ease” property includes the fast and then slow functionality that you aspired to. This is certainly smoother than what you have been able to get so far, but it is pretty blurry - not sure if this is the trade-off you want to make. And since this is an experimental property, you probably still want your existing jQuery animation to be back-up for older browsers.

Answer 2

I had a different view of the minimum point value that is visually recognizable. The smallest unit for pt I noticed that the change was 0.2pt .

However, I noticed that when applying the change in increments of 0.2 points over a period of 1 millisecond per increment in the while loop, it still looked a bit “laggy”. May not work if not working in jsfiddle.

The fact is that if you want to smoothly change the font size by 10 points, you must apply the change in steps of 0.2pt or 0.25pt or 0.5pt (which you will ever find the most smooth) at a time and you must use interval 1 to Remain smooth, but you should not use a different interval, because otherwise the incremental steps should be small to notice, and the whole animation becomes discontinuous again.

I think that trying to make this 10pt change in 2 seconds will always look messy, no matter what structure you use, due to the lack of a visual change in font size in the lower decimal places.

This worked for me pretty well:
(In this example, I do not take into account the decreasing font size animation, but this can be added from the 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 smoother, increase the increments value to 0.25 or even 0.5 . You have a nice smooth step, you can set the dots to any other value, and the animation will remain smooth if you do not press the 2-second animation interval.

Answer 3

jQuery animations are terrible. Look at another tweening solution that uses the requestAnimationFrame technique or the best synchronization mechanism. Maybe try tween lib, for example tween.js look at a demo in Rome, beautiful slow moving clouds ...

Answer 4

Currently, only firefox supports sub-pixel rendering of fonts, so animations in other browsers will always snap to pixels.