Animar el cambio de un valor numérico con JavaScript

CountUp.js es una bonita biblioteca JavaScript para animar de manera sencilla el cambio de un valor numérico. Este recurso no posee dependencias, solo necesita que el navegador tenga habilitado JavaScript para funcionar.

La librería tiene un peso de casi 2kb en su versión simplificada, valor que se reducirá considerablemente al aplicarle una compresión gzip. Un peso muy apropiado si tenemos en cuenta que la funcionalidad es puramente estética.

animar el cambio de un numero con javascript

CountUp.js se puede instalar directamente bajando la biblioteca desde su apartado en Github o bien utilizando Bower tratando al proyecto como un componente.

Para entender más acerca de este proyecto les recomiendo visitar la demostración online disponible desde el sitio oficial del recurso.

Su instalación es de lo más simple, si no queremos utilizar Bower y buscamos realizar una implementación 100% manual simplemente debemos incorporar la biblioteca a nuestro proyecto, luego inicializamos el objeto:

var numAnim = new countUp("SomeElementYouWantToAnimate", startVal, endVal, 
decimals, duration)

Por último iniciamos la animación, para ello una simple linea alcanza y sobra.

numAnim.start()

Web: CountUp.js

Categorizado en: