JSFiddle - React, Tailwind, and code Playground

by franklinjavier

HTML

<script src="http://www.greensock.com/js/1.8/TweenMax.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>


<section id="canvas">
    <p class="number"></p>
    <form action="" id="number-input">
        <input type="number" value="800">
        <button id="animate">Animate</button>
    </form>
</section>

CSS

#container > header, #main {
    width: 80%;
    margin: 110px auto;
}
.number {
    text-rendering: optimizeLegibility;
    font: bold 10em/0.8 'duru sans', serif;
    letter-spacing: -8px;
    color: #666;
    margin: 10px 0;
}
form {
    margin: 25px 0 0;
}

JavaScript

var $text = $('p.number'),
    $input = $('input[type=number]'),
    endVal = 0,
    currVal = 0,
    obj = {};

obj.getTextVal = function () {
    return parseInt(currVal, 10);
};

obj.setTextVal = function (val) {
    currVal = parseInt(val, 10);
    $text.text(currVal);
};

obj.setTextVal(0);

var animate = function (e) {
    e.preventDefault();
    currVal = 0; // Reset this every time
    endVal = $input.val();

    TweenLite.to(obj, 3, {
        setTextVal: endVal,
        ease: Power2.easeBounce

    });
};

$('#number-input').on('submit', animate);