JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div class="points_view" value="100">
    <div class="">
        <div>&nbsp;</div>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="">
        <div>&nbsp;</div>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="d2">
        <div>&nbsp;</div>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="d2">
        <div>&nbsp;</div>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

SCSS

div.points_view {
    $line_height = 400px;
    position: relative;
    font-size: $line_height;
    float:left;
    height: $line_height;
    overflow: hidden;
    > div{
        float: left;
        line-height:$line_height;
        height:$line_height;
        transition: transform 0.9s ease-in-out;
    } 
    @for $i from 0 through 9 {
        >div.d#{$i} { transform: translate3d(0px, -($i+1)*$line_height,0px); }
    }
    >div.d_{
        transform: translate3d(0px,0px,0px); 
    }
}

JavaScript

var elements = document.getElementsByClassName('points_view');
if (elements.length < 1) {
    return;
}
for (var i = 0, max = elements.length; i < max; i++) {
    setupDigitView(elements[i]);
    elements[i].renew(elements[i].getAttribute('value'));
    (function (i) {
        setInterval(function () {
            elements[i].renew(Math.floor(Math.random() * 2000));
        }, 2000);
    })(i);
}

function setupDigitView(el) {
    var children_count = el.children.length;
    var digits = {};

    for (var i = 0; i < children_count; i++) {
        digits[i] = el.children[children_count - 1 - i];
    }
    var number = 0;

    function renew(number) {
        console.log('New number is: ' + number);
        var digitsVals = number.toString().split("").reverse();
        for (var digit in digits) {
            digits[digit].className = 'd' + (digitsVals[digit] || '_');
        }
    }

    el.renew = renew;
}