Infinite Scrolling Text

In this tutorial, you will learn how to create an infinite scrolling text from Right to Left and Left to Right using CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="container">
    <div class="scroll">
      <div class="RightToLeft">
        <p>Lorem ipsum dolor sit amet consectetur</p>
        <p>Lorem ipsum dolor sit amet consectetur</p>
      </div>
      <div class="LeftToRight">
        <p>Sed do eiusmod tempor incididunt</p>
        <p>Sed do eiusmod tempor incididunt</p>
      </div>
    </div>
  </div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  font-family: 'Arial', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.scroll {
  white-space: nowrap;
  margin: 0 2em;
}

.scroll div {
  display: flex;
  gap: 2em;
}

.scroll p {
  font-size: 5em;
  color: white;
  font-weight: bold;
  margin-bottom: 0;
  line-height: 10px;
}

.RightToLeft {
  animation: RightToLeft 10s infinite linear;
}

@keyframes  RightToLeft {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

.LeftToRight {
  animation: LeftToRight 10s infinite linear;
}

@keyframes  LeftToRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}