Can we Make A CSS Only Infinite Logo Marquee With ZERO Repeating Logos?

In this video we'll be taking the text only marquee of last week to the next level!

import {
import{
  ReactLogo,
  AstroLogo,
  TailwindLogo,
  JSLogo,
  NextjsLogo,
  RemixLogo,
  TSLogo,
  SvelteLogo,
  VueLogo,
} from "./logos";
import "./styles.css";

function App() {
  return (
    <div className="wrapper">
      <div className="marquee fadeout-horizontal" style={{ "--numItems": "9" }}>
        <div className="marquee-track">
          <div className="marquee-item" style={{ "--item-position": "1" }}>
            <ReactLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "2" }}>
            <AstroLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "3" }}>
            <TailwindLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "4" }}>
            <VueLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "5" }}>
            <NextjsLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "6" }}>
            <RemixLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "7" }}>
            <JSLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "8" }}>
            <TSLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "9" }}>
            <SvelteLogo />
          </div>
        </div>
      </div>

      <div
        className="marquee fadeout-horizontal"
        style={{ "--numItems": "9", "--direction": "reverse" }}
      >
        <div className="marquee-track">
          <div className="marquee-item" style={{ "--item-position": "1" }}>
            <ReactLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "2" }}>
            <AstroLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "3" }}>
            <TailwindLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "4" }}>
            <JSLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "5" }}>
            <NextjsLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "6" }}>
            <RemixLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "7" }}>
            <JSLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "8" }}>
            <TSLogo />
          </div>
          <div className="marquee-item" style={{ "--item-position": "9" }}>
            <SvelteLogo />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Last week we created a text marquee using only CSS. This marquee was using an old trick to mirror the contents and swap the animation back to the start exactly halfway.

Though there’s nothing wrong with this approach, I really had the urge to make a marquee where there was no mirroring of the content needed. That’s exactly what we’ll be exploring in this tutorial.

We will be creating a infinite logo marquee, with CSS only, and no repeating logos. This is a fun challenge and I’m excited to show you how to do it!

Watch the video above the playground to see how I did it.

Eager to learn more?

I think this video might be a good fit for you too!

13:27

Can we Make A CSS Only Infinite Logo Marquee With ZERO Repeating Logos?

Making a CSS Only Infinite Text Marquee