Creating a Scrolling Ticker Component

When you have a list of items to display—like sponsors for a product or clients using your technology—you might want a way to showcase them without prioritizing any one item over the others.

In some cases, it will be necessary to promote some things over others, but what about when each item on the list is equally important? Unlike a grid or your standard list, which naturally elevates some items over others, a more balanced approach would be ideal.

You’ve probably come across this very solution while browsing the web, but figuring out how it’s done can be difficult. An infinitely scrolling ticker allows you to display your items evenly, ensuring every entry gets the same level of visibility.

While one item will always appear first, the continuous scroll ensures no single item gets more attention than the others. I use this approach in my portfolio to display the various technologies I have experience with, and I’ve used it several times on my public work as well. Sure, I’m more proficient in some than others, but this way I don’t have to rank or weigh my skills.

Here’s a minimal example of the component:

Lorem

Ipsum

Dolor

Sit

Amet

Lorem

Ipsum

Dolor

Sit

Amet

As you can see, the items we have placed in the component rotate seamlessly regardless of screen size. We accomplish this with surprisingly little CSS: A container section with the classes flex to place the arrays in a row and overflow-hidden so the arrays are spread out and hidden outside of the viewport.

Inside that section, we need two identical sections that map over our array of items with the class flex, min-w-full, and justify-evenly so the items inside our arrays are spread out evenly in their rows, using all available space, and finally animate-marquee.

animate-marquee consists of a custom keyframe and animation we add to the Tailwind config file.

That’s all there is to it! Hopefully, you found this useful!

It’s the kind of animation you’ll find all over the web, but it can be hard to decipher how it’s being done in the dev tools, and oftentimes you won’t be able to find a good explanation if you try to search for it either.

Of course, this code can be adapted for different technologies, and you can play around with the animation settings to get the pace or even the direction you want.

So go give it a try and see if it works for you!