Использование движущегося текста на свитке в качестве разделителя между разделами сайта

Question

Я пытаюсь переместить текст при прокрутке, поэтому, когда пользователь прокручивает из одного раздела веб-сайта в другой раздел, текст перемещается горизонтально по странице, служа естественным разделителем. Я могу добиться эффекта изолированно, но проблема начинается, когда я добавляю разделы выше и ниже раздела с текстовой анимацией. Я знаю, что с тем, как я использую положение, что-то не так, но я не могу разобраться.

Вот мой кодовый блок, и заранее спасибо! https://codepen.io/Qsbrown3/pen/wvKdxeP?editable=true%3Dhttps%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FSVG%2FElement%2FtextPath

Вот мой css: я пытался использовать положение: абсолютные и различные итерации, но текст, который я хочу переместить на прокрутке, продолжает доминировать над другими разделами:

    @import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 5000px;
  overflow-x: hidden;
  background: #00947a;
}

.blue {
  height: 100px;
  background-color: blue;
}

.yellow {
  height: 100px;
  background-color: yellow;
}
/**/
.moving-text{
  position: relative;
  width: 100vh;
  height: 50vh;
  display: flex;
}

.moving-text{
  position: relative;
  width: 50%;
  overflow: hidden;
}

.first-right {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 8em;
  left: 500px;

  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
}
 .right {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 90%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 8em;
  left: 500px;

  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
}

.scrolling-text-right
{
  margin: 0;
  padding: 0;
  position: fixed;
  top: 70%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 8em;
  right: 500px;

  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
}