How to Add a Count-Up Animation to Numbers on a Page

A count-up animation runs a number from a starting value to a target value when the page loads. It draws attention to key stats, such as customer counts or results. Use motion sparingly, since too much animation can distract visitors. Motion is one of the principles in Unbounce's Attention-Driven Design ebook.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add the animation to your page

The script is hosted on GitHub as this gist.

1. Copy the script and add it to the JavaScripts section with placement set to Before Body End Tag. To change how long the animation runs, change the duration in milliseconds on line 14.
2. Add a text element and enter the starting number.
3. With the text editor open, click Source.

4. Add the counter class and a data-count attribute to the innermost span around the number. The data-count value is the number the counter stops at. In this example it's 20000.

   

5. If the number isn't inside a span, wrap it in one.
6. Save and republish the page.

Test the change

Run an A/B test with a small share of traffic to confirm the animation doesn't lower your conversion rate.