JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="counter">30</div>
<div class="count_block">Counter Completed</div>
<div class="counter"><a href="javascript:void(0);">Pause</a> | <a href="javascript:void(0);">Play</a></div>

JavaScript

var counter = document.getElementsByClassName('counter');
var numCounters = counter.length;
var countBlock = document.getElementsByClassName('count_block')[0];
var anchors = document.getElementsByTagName('a');
var count = { iterator: 30 };
var tween = null;

anchors[0].addEventListener('click', onClickedPause, false);
anchors[1].addEventListener('click', onClickedPlay, false);

function init() {
    TweenMax.set(counter, {
        display: 'inline-block',
        float: 'left',
        width: 40,
        padding: 30,
        fontSize: 32,
        textAlign: 'center',
        color: '#fff',
        backgroundColor: '#13AD2A'
    });

    TweenMax.set(counter[1], {
        marginLeft: 20,
        padding: 39,
        clearProps: 'fontSize, width'
    });

    TweenMax.set(countBlock, {
        display: 'none',
        float: 'left',
        margin: '8px 0px 8px 10px',
        padding: '13px 10px',
        fontSize: 14,
        lineHeight: '15px',
        color: '#fff',
        backgroundColor: '#13AD2A'
    });

    TweenMax.set(anchors, { color: '#fff' });
    
    tween = TweenMax.to(count, 30, {
        iterator: 0,
        onUpdate: function() {
            counter[0].innerText = Math.ceil(count.iterator);
        },
        onComplete: function() {
            TweenMax.set(countBlock, {
                display: 'inline-block'
            });
        },
        callbackScope: this,
        ease: Power0.easeNone
    });
}

function onClickedPause() { tween.pause(); }
function onClickedPlay() { tween.play(); }
//
init();