JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<div>
    <div class="strict"> <span class="ffx-long-text">Well, here is quite a bit of text...</span>

    </div>
</div>

CSS

.strict {
    border: 1px solid #ccc;
    display: inline-block;
    margin-left: 6em;
    overflow: hidden;
    padding: 0.3em;
    white-space: nowrap;
    width: 120px;
}
.ffx-long-text {
    position: relative;
    transition: transform 5s ease-in-out, -webkit-transform 5s ease-in-out;
    display: inline-block;
}

.end-animation {
    left: -78px
}

JavaScript

$('.ffx-long-text').on('mouseenter mouseleave', function (event) {
    var lt = $('.ffx-long-text')[0];
    var ltWidth = lt.offsetWidth;
    var container = lt.parentNode;

    console.log(lt);

    if (event.type === 'mouseenter') {
        var move = container.clientWidth - ltWidth;
        lt.style.transform = lt.style.webkitTransform = 'translateX(' + move + 'px)';
        
    } else {
        lt.style.transform = lt.style.webkitTransform = 'translateX(0)';
    }
    
    //lt.addEventListener("transitionend", showMessage, false);
    
    function showMessage() {
        console.log("here");
        lt.css('left', '-78px');
    }
});