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!
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.
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
property so that as the element animates out, it remains hidden.overflow: hidden
To create a simple animation, we set the parent element to
and give it a specific width, such as position: relative
.
Then, we set the child element to width: 100vw
and position: absolute
because we want to animate it using the CSS width: inherit
property.
The animation involves moving the element from left
to left: 0%
, which will make the entire element move out of the viewport.left: -100%
.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
to left: 100%
.
We'll need to establish another keyframe for this second child element and name it left: 0%
. Afterward, we'll create classes for our keyframes.secondary
@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!
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
and width
, when the first element, leaves with animation-duration
the second element enters in with left: -20%
.
Notice the use of left: 80%
, 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.infinite