Create infinite auto-scroll animation with pure CSS

This guide is to help you understand the concept of how Infinite auto-scroll animations you see on websites like JamStack work, and how to implement them with just CSS!

What is this animation?

When you visit websites like JamStack, you'll encounter an animation showcasing frameworks compatible with the JamStack. Also, some websites utilize this animation to display customer reviews, sponsors, testimonials, etc.

Concept behind it

To understand how this animation works, let's break it down. It simply involves animating an element across the screen. To achieve this, we'll need the parent element to have an overflow: hidden property so that as the element animates out, it remains hidden.

Structuring animation elements

To create a simple animation, we set the parent element to position: relative and give it a specific width, such as width: 100vw. Then, we set the child element to position: absolute and width: inherit because we want to animate it using the CSS left property. The animation involves moving the element from left: 0% to left: -100%, which will make the entire element move out of the viewport.

.scroll-parent {
  position: relative;
  width: 100vw;
  height: 20rem;
  overflow-x: hidden;
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: primary 3s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

This gives us..

To give the appearance of infinity, we can create a duplicate of the child element right next to the original one and move it from left: 100% to left: 0%. We'll need to establish another keyframe for this second child element and name it secondary. Afterward, we'll create classes for our keyframes.

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

.primary {
  animation: primary 3s linear infinite;
}

.secondary {
  animation: secondary 3s linear infinite;
}

We then structure our HTML code as follows.

<div class="scroll-parent">
  <div class="scroll-element primary">...</div>
  <div class="scroll-element secondary">...</div>
</div>

And thats it!

How does it work?

We are simply animating two similar elements across the screen, the reason why we are using two is that as one leaves the other will fill in the gap, since the two elements are identical with the same width and animation-duration, when the first element, leaves with left: -20% the second element enters in with left: 80%. Notice the use of infinite, this is to ensure that the animation is looped over, once the animation finishes the illusion is created by replacing the second element with the first element and since they are exactly the same, it looks like the animation moves towards the left direction infinitely.