JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/zachstronaut/jquery-css-transform/master/jquery-css-transform.js"></script>
<script src="https://raw.github.com/zachstronaut/jquery-animate-css-rotate-scale/master/jquery-animate-css-rotate-scale.js"></script>
<input id="parkit" type="button" value="park those suckers">
<input id="reset" type="button" value="line em back up">

<div id="park">
    <ol>
        <li><a href=''>one</a></li>
        <li><a href=''>two</a></li>
        <li><a href=''>three</a></li>
        <li><a href=''>four</a></li>
        <li><a href=''>five</a></li>
        <div id="envelop"></div>
    </ol>
</div>

CSS

#park {
    background-color: #00C;
    height: 400px;
    min-width: 400px;
}

#envelop {
    display: block;
    position: relative;
    background-color: red;
    max-width: 300px;
}

#envelop li {
    display: inline-block;
}

#envelop li+li {
    margin-left: 1em;
}

.spaced li+li {
    margin-left: 1em;
}

li {
    display: block;
    position: relative;
}

li a {
    color: #FF0;
    text-decoration: none;
    font-weight: bold;
    font-family: monospace;
    font-size: 10.5pt;
    background-color: #003;
}

input[type=button] {
    padding: 2px 5px;
}

JavaScript

function noop() {}

/**
 * Set the transform origin for an element
 * using all those nasty vendor specific calls.
 */
function origin(element, top, left) {
    var origin = top + " " + left;
    element.css("transform-origin", origin)
           .css("-o-transform-origin", origin)
           .css("-moz-transform-origin", origin)
           .css("-webkit-transform-origin", origin)
           .css("-ms-transform-origin", origin);
}

/**
 * Park and element. Like a car. Yes.
 */
function park(fixed, movable, envelop, i) {
    // rotate movable around fixed
    var foff = fixed.offset();
    var fh = fixed.height();
    var fw = $("a", fixed).width();
    var moff = movable.offset();
    var mh = movable.height();

    var speed = 300;

    origin(movable, "0px", "-" + mh + "px");
    // magic numbers. the angle should depend on the length of the rotation term
    var props = { left: "5px", rotate: "-32deg"};
    movable.animate(props, speed, function() {
        origin(movable, "0px", "0px");
        // and more magic numbers, these make things 'look good' in between
        // the rotation and the slide
        movable.css("left", "15px");
        movable.css("top", "-3px");
        props = {
            left: (fw + 10) + "px",
            rotate: "0deg",
            top: "-20px"
        };
        movable.animate(props, speed / 2, function() {
            run(envelop, i + 1);
        });
    });
    
    var counterprops = {};
    var set = $("li",movable), s, se = set.length;
    for(s=1; s<se; s++) {
        // and even more magic numbers, where we use "top"
        // to make it look like the not-first term is stable
        counterprops = {rotate: "32deg", top: (s*30)+"px"};
        $(set[s]).animate(counterprops, speed, function(){
            counterprops = {top: "0px", rotate: "0deg"};
            $(this).animate(counterprops, speed/2, noop);
        });
    }
}

/**
 * Perform a parking run.
 */
function run(envelop, i) {
    // envelop the previous...