Smooth animation loop for horizontal text scroll

Question

I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.

I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.

Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.

I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.

html, body {
  margin: 0;
}

.scroll {
     display: flex;
     position: relative;
     width: 100%;
     height: 15%;
     min-height: 150px;
     margin: auto;
     background-color: #252525;
     overflow: hidden;
     z-index: 1;
}
.m-scroll {
     display: flex;
     position: absolute;
     top: 0;
     left: 0;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     height: 100%;
     white-space: nowrap;
     transform: scale(2);
     transition: all 1s ease;
}
 .m-scroll > div {
     display: flex;
     animation: scrollText 10s infinite linear;
}

.m-scroll h1 {
     margin: 0;
   margin-right: 150px;
     font-size: 25px;
     color: #ffffff;
     transition: all 2s ease;
}

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

<div class="scroll">
  <div class="m-scroll">
    <div>
      <h1>
        <span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
      </h1>
      <h1>
        <span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
      </h1>
      <h1>
        <span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
      </h1>
      <h1>
        <span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
      </h1>
    </div>
  </div>
</div>

So how could I make it become smooth ?

This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it

This might help: stackoverflow.com/questions/71336113/… if not let me know and I’ll put up an answer more specific to your code. — A Haworth
– A Haworth, Commented Mar 4, 2022 at 19:44
I read about marquee and tried it out however it doesn't really fix my problem, because I want multiple time the same sentence to appear (on the same line) the answers I saw with marquee so far is one sentence.. here is a codepen where i try with marquee showing the behavior I describe : codepen.io/knudsem/pen/QWOYPwm — Mathi
– Mathi, Commented Mar 4, 2022 at 20:15
I definitely would not recommend marquee - it is deprecated and should not be used as it may not work in some browsers at any point in the future. It was the other solution I was suggesting - have multiple copies of what you want to scroll to prevent having gaps. I'll put up an answer here based on your code in a bit. — A Haworth
– A Haworth, Commented Mar 4, 2022 at 20:21
Ok thanks i will check it, Yes i heard marquee is very outdated — Mathi
– Mathi, Commented Mar 4, 2022 at 20:23
I'm struggling a bit to understand your answer on his question.. i tried this : codepen.io/knudsem/pen/WNXPWOK — Mathi
– Mathi, Commented Mar 4, 2022 at 20:40

A Haworth · Accepted Answer · 2022-03-04 21:40:29Z

3

I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.

html,
body {
  margin: 0;
}

.scroll {
  position: relative;
  width: 100vw;
  height: 15%;
  min-height: 150px;
  background-color: #252525;
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.m-scroll {
  overflow_ hidden;
  height: 100%;
  white-space: nowrap;
  animation: scrollText 10s infinite linear;
  margin: 0;
  font-size: 0;
  display: inline-block;
}

span {
  font-size: 50px;
  display: inline-block;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  color: white;
}

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

<div class="scroll">
  <div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>

Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.

answered Mar 4, 2022 at 21:40

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mathi Over a year ago

Thanks so much it looks great, if i want to have multiple time the sentence can i reduce the width of the span to lets say 30vw ?

Mathi Over a year ago

It works amazingly thank you man ! :) I will see if i manage to throw in some flexbox in it, if somehow I manage to make it work with it i'll let you know ;)

A Haworth Over a year ago

Yes you can reduce that min width to 30vw for example, but you'll need some more copies of the text - there needs to be enough to make sure you don't get that nasty gap at the end. Will wait to hear about flex!

Mathi Over a year ago

Though, I still don't see what was wrong with my code, the use of vw instead of pixel or % made it somehow work ?

Mathi Over a year ago

Never mind i see it's flexbox that made it go crazy. I'd never think i'd see the day come where flexbox would give me more trouble than help :p Thanks again for your help man and have a great week

Collectives™ on Stack Overflow

Smooth animation loop for horizontal text scroll

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related