JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul id="ticker">
    <li>
        Sample note 1
    </li>
    <li>
        Sample note 2
    </li>
    <li>
        Sample note 3
    </li>
</ul>

JavaScript

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var first = el.find('li').first(),
            last = first.nextAll().last(),
            h = last.height();
        first.animate({
            height: 0,
            opacity: 0
        }, duration, function() {
            $(this).insertAfter(last).animate({
                height: h,
                opacity: 1
            }, duration, function() {
                ticker(el, duration);
            });
        });
    }
}

ticker($('#ticker'), 1000);