JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

<div id="wrapper">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</div>

CSS

#wrapper {
    height: 500px;
    overflow: hidden;
    position: relative;
}

p {
    position: absolute;
    margin: 0;
    padding: 0;
}

.current {
    color: red;
}

JavaScript

// Constants, you can play with it
var STEP = 90;
var CURRENT_INDEX = 3;

// Variables for calculating
var currentTop = STEP * CURRENT_INDEX;
var nextForCurrentTop = STEP * (CURRENT_INDEX + 1);
var $numbers = $('#wrapper > p');
// In this case = 7
var count = $numbers.length;
var secondToLastTop = STEP * (count - 1);

$numbers.each(function(i) {
    var $this = $(this);
    $this.css('top', i * STEP + 'px');

    if (i === CURRENT_INDEX) {
        $this.addClass('current');
    }
});

window.setTimeout(shuffle, 2000);

function shuffle() {
    $numbers.each(function() {
        $this = $(this);
        // Calculating the new position of the element
        h = parseInt($this.css('top')) + STEP;

        // In this case = 540
        if (h > secondToLastTop) {
            $this.css('top', 0);
            return;
        }

        // In this case visually = 3rd element
        if (h === currentTop) {
            $this.addClass('current');
        }

        // In this case visually = 4th element
        if (h === nextForCurrentTop) {
            $this.removeClass('current');
        }

        $this.animate({
            top: h,
            easing: 'easeIn'
        }, 500, '');
    });

    window.setTimeout(shuffle, 2500);
}