Search code examples
javascriptcssgoogle-plusgoogle-plus-one

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

Solution

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

    1. Split that number into inline block elements
    2. 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.
    3. This new element has its contents set to {number}<br>{number + 1}<br>{number}
    4. The scrollTop property of this new element is animated to create the scrolling effect
    5. 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.