JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  О КОМПАНИИ
  <div class="inner"><span>О КОМПАНИИ</span></div>
</div>

CSS

.wrapper {
  outline: solid 1px green;
  width: 100%;
  height: 20vw;
  font-size: 12vw;
  font-weight: bold;
  font-family: arial;
  line-height: 20vw;
  position: relative;
}
.inner {
  pointer-events: none;
  background: white;
  width: 30vw;
  height: 20vw;
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.5);
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0;
}
.inner span {
  white-space: pre;
  color: navy;
  position: absolute;
  top: -2px;
  left: 0;
}

JavaScript

let inner = document.querySelector('.inner'),
    span = inner.querySelector('span'),
    pos = 0, step = 0, steps = 100, reverse = false;

function move() {
    if (step > steps || step < 0) {
    	reverse = !reverse;
    }
    step = reverse ? step - 1 : step + 1
    pos += easing(step/steps)*6*(reverse?-1:1)
    
    inner.style.left = pos + "px";
    span.style.left =  - pos + "px";
     
    requestAnimationFrame(move);
}
move();

function easing (t) { return t<0.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t }