An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
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 exactly is this animation?
When you open some websites like JamStack, you'll see an animation that shows the frameworks compatible with the JamStack, also on some other websites they use this cool animation to show customer reviews, sponsors, testimonials, etc.
Concept behind it?
To understand how this animation works let's break it down a little, it simply involves animating an element across the screen. To achieve this we'll need its parent element to have an overflow: hidden
, so as the element animates out, it remains hidden.
Structuring animation elements
We make the parent element position: relative
with a discrete width like width: 100vw
, and the child element position: absolute
with width: inherit
because we'll be animating it with the CSS left property. The animation will simply involve moving the element from left: 0%
to left: -100%
, this will animate the entire element away from 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..
Not looking infinite is it ? to make it seem infinite we add a duplicate of the child element right next to the initial child element, making it move from left: 100%
to left: 0%
.
We'll create another keyframe for this second child element, calling it secondary
, then we'll create classes for our keyframes.
.primary { animation: primary 3s linear infinite;}.secondary { animation: secondary 3s linear infinite;}@keyframes primary { from { left: 0%; } to { left: -100%; }}@keyframes secondary { from { left: 100%; } to { left: 0%; }}
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, for example, 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.
Thank you for reading , If you have any questions, additions, or subtractions please comment below.
The full source code is linked below
damiisdandy / css-animation-auto-scroll
infinte auto scroll animation with pure CSS
Original Link: https://dev.to/damiisdandy/create-infinite-auto-scroll-animation-with-pure-css-2p6j
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To