Как оживить элемент при перетаскивании?Скользящее меню?

Question

Моя идея в том, что у меня есть "карусель" из 3 элементов, управляемая клавишами со стрелками.Когда я двигаюсь влево / вправо со стрелками, мои 3 элемента (которые являются текстовыми блоками) будут перемещаться влево или вправо, и будет обрезан по полю , чтобы они не уходили с экрана, а маскировалиськак это:

до прокрутки -

после прокрутки-

Для этого у меня естьустановите мои клавиши со стрелками для увеличения числа, определяющего, какой элемент li включен одновременно:

  if(event.key == "ArrowRight")
    {
      if(this.midMenuIndex < 2)
      {
        this.midMenuIndex++;
      }
    } else if (event.key == "ArrowLeft")
    {
      if(this.midMenuIndex > 0)
      {
        this.midMenuIndex--;
      }
    } 

HTML:

<ul class = "menuText">
                        <li>first</li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in augue sed nibh mollis sodales at in velit. Maecenas ullamcorper mollis posuere.</li>
                        <li> 3rd </li>
                    </ul>

А для отсечения я пробовал: clip-path: inset(10px 20px 30px 40px);

Что работает, но, похоже, если я переместу один li, текст будет сжат и не будет полностью замаскирован.Для упрощения я хотел использовать https://visionmedia.github.io/move.js/ для перемещения элементов li, но не уверен относительно наиболее эффективного способа выполнения этой прокрутки в координации с возрастающим числом.

Правильный ли путь клипапойти или другой метод?