Q:

How does Google Plus counter animation work?

Does anybody know how Google Plus' post votes animation is working?
This is what I mean: http://cl.ly/image/0h1l1a181j1O

A:

From what i can tell by stepping through the code, they:

Split that number into inline block elements
The part that needs to animate (the last digit if the number is not 9, the whole number if it is 9) has its height set explicitly, and its overflow is set to hidden.
This new element has its contents set to {number}<br>{number + 1}<br>{number}
The scrollTop property of this new element is animated to create the scrolling effect
After effect ends, they replace the split up elements with the new number.

I'm unsure of what the 3rd number of this element is for, possibly to make scrolling backwards easier.

