Trouble making Marquee text continous in HTML

Question

I'm trying to make my marquee text continuous, but can't figure out how too. This is what I've right now in my HTML:

.marquee2 {
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-20% + var(--offset));
    --move-final: calc(-40% + var(--offset));
}

.marquee__inner2 {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 12s linear infinite;
    animation-play-state: play;
    color: #1a1a1a;
    font-family: 'Noctis Bold';
}

.marquee2 span {
    font-size: 5vh;
    padding: 0 2vw;
}

.marquee2:hover .marquee__inner2 {
    animation-play-state: paused;
}

@keyframes marquee2 {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

    <div class="bg33">
        <div class="marquee2" id="showScroll2">
            <div class="marquee__inner2" aria-hidden="true">
                <span>HTML</span>
                <span>CSS</span>
                <span>SASS</span>
                <span>JAVASCRIPT</span>
                <span>JQUERY</span>
                <span>VUE.JS</span>
                <span>PYTHON</span>
                <span>JAVA</span>
                <span>REACT</span>
                <span>GIT</span>
                <span>NPM</span>
                <span>RSTUDIO</span>
                <span>JIRA</span>
                <span>AGILE</span>
                <span>FIGMA</span>
                <span>PS</span>
                <span>ILLUSTRATOR</span>
                <span>BALSAMIQ</span>
            </div>
        </div>
    </div>

The text doesn't seem to be continuous and it break and starts off again, which is annoying and doesn't show all the text. I want this text to loop over to see appears continuous and full for viewing by the audience. Can anyone help me with this?

Answer 1

A simple way of doing this - if you know the text will at least cover the viewport width - is to have a second copy. Then you animate by moving the whole thing left by half its width and starting again.

Here's the altered snippet, note you don't need initial setup conditions to center anything.

  .marquee2 {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-20% + var(--offset));
  --move-final: calc(-40% + var(--offset));
}

.marquee__inner2 {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(0, 0, 0);
  animation: marquee2 12s linear infinite;
  animation-play-state: play;
  color: #1a1a1a;
  font-family: 'Noctis Bold';
}

.marquee2 span {
  font-size: 5vh;
  padding: 0 2vw;
}

.marquee2:hover .marquee__inner2 {
  animation-play-state: paused;
}

@keyframes marquee2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(50%, 0, 0);
  }

<div class="bg33">
  <div class="marquee2" id="showScroll2">
    <div class="marquee__inner2" aria-hidden="true">
      <span>HTML</span>
      <span>CSS</span>
      <span>SASS</span>
      <span>JAVASCRIPT</span>
      <span>JQUERY</span>
      <span>VUE.JS</span>
      <span>PYTHON</span>
      <span>JAVA</span>
      <span>REACT</span>
      <span>GIT</span>
      <span>NPM</span>
      <span>RSTUDIO</span>
      <span>JIRA</span>
      <span>AGILE</span>
      <span>FIGMA</span>
      <span>PS</span>
      <span>ILLUSTRATOR</span>
      <span>BALSAMIQ</span>
      <span>HTML</span>
      <span>CSS</span>
      <span>SASS</span>
      <span>JAVASCRIPT</span>
      <span>JQUERY</span>
      <span>VUE.JS</span>
      <span>PYTHON</span>
      <span>JAVA</span>
      <span>REACT</span>
      <span>GIT</span>
      <span>NPM</span>
      <span>RSTUDIO</span>
      <span>JIRA</span>
      <span>AGILE</span>
      <span>FIGMA</span>
      <span>PS</span>
      <span>ILLUSTRATOR</span>
      <span>BALSAMIQ</span>
    </div>
  </div>
</div>

ADDITION: to go from left to right start at -50% and end at 0.

  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }