Create an infinite horizontal scroll animation

Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respects prefers-reduced-motion, and is progressively enhanced with just a couple of lines of JS to add in the functionality (and duplicate content that we’ll need).

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:16 - The HTML
02:23 - Basic CSS
05:31 - Checking for prefers-reduced-motion with JavaScript
08:50 - Setting the stage for the animation with CSS
13:16 - Adding the animation
19:53 - Fixing the doubled content in the HTML
25:50 - Adding speed and direction options

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Aliena]

"I help people fall deeply, madly in in love with css." You're succeeding every time! Thank you for all these gems!

[Shaheer-xsos]

80% of my CSS skills, I have learned from you Kevin, you're the best buddy, thank you for these amzing videos ☺

[underroad]

@KevinPowell this is great demo! I added this code to pause the animation on hover.

.scroller__inner:hover {
animation-play-state: paused;
}

[anchimayen]

Couldn't be a more perfect timing for me. I've been thinking about adding such a slider to my art portfolio website. Appreciate your work man! ✨

[MarshallSC]

I know You don't do a lot of JS video, but man, when you do, they are beyond awesome.
Thank You for the free knowledge!

[lucacarrara]

I was just looking for this kind of animation yesterday, found few solutions but neither of them with an explanation. Now I got the idea behind it and also the reason why my infinite scroll had this kind of "jump" between the first set of icons and the second. Thanks a lot!

[rheumaticharm]

Sir following you since the beginning of my coding journey. I'm not primarily a front end dev so your tutorials are a gem. Thanks for amazing content.

[plastikbeau]

The reason you can manipulate properties and attributes of elements created with JS is that a DOM element is just an object in JS, the difference is it does not have a context (like a parent element, etc.) before it's added to a document. Everything else is there as soon as it's created. You can even add event handlers and trigger events on it!

[skillzorskillsson]

you probably already know this, but you can shorten the gradient in the mask by using -webkit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent); so you don't need to write "white" twice

[TheSessionStarts]

Kevin, you make me fall in love with CSS each time, I visit one of your videos . thank you so much for the value! 🙌

[jbink]

man i'm struggling with my current project to get a fluid continuous effect... you made my day ... cheers from France

[naveenvenkateshk]

Thank you Kevin for this informative video. 2 years ago I had a requirement to implement an infinite scroll component to display brand logos. I searched in internet and youtube but never found a proper guide / implementation. If I had this video 2 years ago, it would have saved me a ton of efforts, time and stress.

[_duongductrong]

Wow, that's so amazing, I think it was so complex, but after I saw your video, understood it so easy (sorry for my English)

[ELStalky]

The object returned from matchMedia has a "change" event, by the way.
Using that, one can react to changing user (and emulation) settings without reloading the page.

[ahooton]

Kevin, I've used clamp() for the column-gap value which allows me to have the scroller span any viewport width whilst keeping the column-gap responsive. I then added clamp() - with the halved values - to the calc() function. Works great! I was initially having a nightmare getting this effect to work properly until I came across your tutorial. Your solution using calc() with the translate and gap value to correct the animation glitch is brilliant. Thank you!

[eworld]

I love the way you setup things and how you explain it so well even in JS. Thank you for these videos as always!

[chriscarton]

Everytime I have a problem I realize you already had the same problem and overcame it. Thank you for lighting the way.

[VidarrKerr]

I am an architect, but I love CSS too. Your Videos are Awesome! Thank You!

[cwilcox]

So good, seeing the animation depend on "Reduce motion" not being enabled. And good to see `aria-hidden="true" `being added to the duplicated items, so a screen reader user wouldn't have to navigate through them.
But what if the images were wrapped in links? The links would still be in the focus order so a keyboard user would still have to navigate through them all. At first I thought the solution would be to use the `inert` attribute instead of `aria-hidden`, making them both hidden from screen readers and non-interactive. However, that would prevent cursor/touch users from clicking on the duplicated links; awkward. The solution is to do what was done before `inert` was supported, add `tabindex="-1"` to the duplicated links.
As long as we're thinking about keyboard users, how awkward is it to be focusing on links that are animating? That can be addressed by adding a couple of `:focus-within` rules, one to change the `overflow` from `hidden` to `scroll` and another for the `animation` property so it only animates when `:not(:focus-within)`.

[nomadhd]

If you track the parent's width and the width of the children and put the `forEach` that adds items into a `while` loop, you can continue adding them until there are enough items to eliminate any gaps, regardless of the size and number of child elements.