JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
Hover over the "L":
<div id="lorem"> <span>L</span>
 <span class="rest">O</span>
 <span class="rest">R</span>
 <span class="rest">E</span>
 <span class="rest">M</span>

</div>
<div class="bar"></div>
<br>
<button id="p">Click Me!</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam expedita amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolorem at mollitia ullam doloremque officia molestiae voluptatum ipsum animi facilis neque pariatur alias praesentium magnam ducimus quis nam...

CSS

.bar {
    background: steelblue;
    height: 5px;
    width: 10px;
}

JavaScript

$("span.rest").hide();

$.Velocity.RegisterEffect("my.transition.slideUpIn", {
    defaultDuration: 900,
    calls: [
        [{
            opacity: [1, 0],
            translateY: [0, 5],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterEffect("my.transition.slideDownOut", {
    defaultDuration: 900,
    calls: [
        [{
            opacity: [0, 1],
            translateY: 5,
            translateZ: 0
        }]
    ],
    reset: {
        translateY: 0
    }
});

var options = {
    duration: 500,
    stagger: 50
};

$("#lorem").hover(function () {
    $("span.rest").velocity("stop").velocity("my.transition.slideUpIn", options);
    $(".bar").stop().animate({
        width: 70
    }, options.duration / 2);
}, function () {
    $("span.rest").velocity("stop").velocity("my.transition.slideDownOut", options);
    $(".bar").stop().animate({
        width: 10
    }, options.duration / 2);
});

$("#p").click(function () {
    $("p").velocity("transition.slideLeftIn", {
        duration: 500,
        stagger: 50
    });
});