Simple jQuery counter with easing or smooth animation

Question

I have created small snippets like fun facts. I want to make the number show smooth with counter increment. I don't have any idea on how to do it in jQuery.

I have searched the google and stackoverflow but can't find any script which does this functionality with just few lines of jQuery.

Here is my HTML, Help me adding jQuery counter effects for fun fact numbers in the snippet.

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


.container {
    max-width: 1200px !important;
    margin: 100px auto;
    font-family: "Montserrat";
}

.container {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_fourth { 
    background-color: #f1f1f1;
    width: 23.5%;
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

/*-=-=-=-=-=-=-=-=-=-*/
/* Style column 1 */
/*-=-=-=-=-=-=-=-=-= */

.at-funfact-wrap {background-color: #f1f1f1; padding: 40px 15px; text-align:center;}

.at-funfact-wrap .at-funfact { padding: 0;}

.at-funfact {
  display:inline-block;
  position:relative;
  padding: 20px 0;
  text-align: center;
}

.at-funfact-wrap .at-funfact .funfact-number {
  display: block;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 15px;
  font-size: 60px;
}
.at-funfact-wrap .at-funfact .funfact-number-title {
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 14px;
}

<div class="container">
    <div class="col_fourth">
        <div class="at-funfact-wrap">
            <div class="at-funfact">
                <span data-number="78" class="funfact-number">78</span>
                <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">PORTFOLIO WORKED</h5>
            </div>
        </div>
    </div>
    <div class="col_fourth">
        <div class="at-funfact-wrap">
            <div class="at-funfact">
                <span data-number="97" class="funfact-number">97</span>
                <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">AWARD WON</h5>
            </div>
        </div>
    </div>
    <div class="col_fourth">
        <div class="at-funfact-wrap">
            <div class="at-funfact">
                <span data-number="35" class="funfact-number">35%</span>
                <h5 class="funfact-number-title">CUPS OF COFFEE</h5>
            </div>
        </div>
    </div>
    <div class="col_fourth end">
        <div class="at-funfact-wrap">
            <div class="at-funfact">
                <span data-number="130" class="funfact-number">130+</span>
                <h5  class="funfact-number-title">HOME DEMO</h5>
            </div>
        </div>
    </div>
</div>

Answer 1

So you want the numbers to grow from zero on page load? Here'es one way. I made the numbers grow asymptotically towards the target value.

If you want the numbers to grow slower you can increase the scale.

    jQuery('.funfact-number').each(function() {
        var $this = jQuery(this);
        var parts = $this.text().match(/^(\d+)(.*)/);
        if (parts.length < 2) return;
      
        var scale = 20;
        var delay = 50;
        var end = 0+parts[1];
        var next = 0;
        var suffix = parts[2];
        
        var runUp = function() {
          var show = Math.ceil(next);
          $this.text(''+show+suffix);
          if (show == end) return;
          next = next + (end - next) / scale;
          window.setTimeout(runUp, delay);
        }
        runUp();
    });

 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


    .container {
        max-width: 1200px !important;
        margin: 100px auto;
        font-family: "Montserrat";
    }

    .container {
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*-=-=-=-=-=-=-=-=-=-*/
    /* Column Grids */
    /*-=-=-=-=-=-=-=-=-= */

    .col_fourth { 
        background-color: #f1f1f1;
        width: 23.5%;
    	position: relative;
    	display:inline;
    	display: inline-block;
    	float: left;
    	margin-right: 2%;
    	margin-bottom: 20px;
    }
    .end { margin-right: 0 !important; }

    /*-=-=-=-=-=-=-=-=-=-*/
    /* Style column 1 */
    /*-=-=-=-=-=-=-=-=-= */

    .at-funfact-wrap {background-color: #f1f1f1; padding: 40px 15px; text-align:center;}

    .at-funfact-wrap .at-funfact { padding: 0;}

    .at-funfact {
      display:inline-block;
      position:relative;
      padding: 20px 0;
      text-align: center;
    }

    .at-funfact-wrap .at-funfact .funfact-number {
      display: block;
      font-weight: bold;
      line-height: 1;
      margin-bottom: 15px;
      font-size: 60px;
    }
    .at-funfact-wrap .at-funfact .funfact-number-title {
      margin: 0;
      text-transform: uppercase;
      font-weight: 400;
      letter-spacing: 2px;
      font-size: 14px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="col_fourth">
            <div class="at-funfact-wrap">
                <div class="at-funfact">
                    <span data-number="78" class="funfact-number">78</span>
                    <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">PORTFOLIO WORKED</h5>
                </div>
            </div>
        </div>
        <div class="col_fourth">
            <div class="at-funfact-wrap">
                <div class="at-funfact">
                    <span data-number="97" class="funfact-number">97</span>
                    <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">AWARD WON</h5>
                </div>
            </div>
        </div>
        <div class="col_fourth">
            <div class="at-funfact-wrap">
                <div class="at-funfact">
                    <span data-number="35" class="funfact-number">35%</span>
                    <h5 class="funfact-number-title">CUPS OF COFFEE</h5>
                </div>
            </div>
        </div>
        <div class="col_fourth end">
            <div class="at-funfact-wrap">
                <div class="at-funfact">
                    <span data-number="130" class="funfact-number">130+</span>
                    <h5  class="funfact-number-title">HOME DEMO</h5>
                </div>
            </div>
        </div>
    </div>