Kevin Powell - Community•2y ago

Marquee problem

Hello, I'm trying to create a CSS marquee animation but the animation is starting back from zero each time. Here is the code:

    <div class="floating-banner">
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
    </div>

    <div class="floating-banner">
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
          <li>ui/ux design</li>
          <li>Logo branding</li>
          <li>development</li>
          <li>icon design</li>
        </ul>
      </div>
    </div>

    .floating-banner {
        padding-block: 8em;
        position: relative;
        width: 100%;
        overflow: hidden;
        & > div {
            background-color: var(--color-primary-variant);
            position: absolute;
            top: 50%;
            left: -10%;
            transform: translateY(-50%);  
            rotate: 3deg;
            & > ul {
                margin-block: 0.5em;
                display: flex;
                font-size: 2.5em;  
                font-weight: 700;
                text-transform: uppercase;
                color: var(--color-bg);
                animation: anime 10s linear infinite;
                & > li {
                    flex-shrink: 0;
                    margin-inline: 0.5em;
                }
            }
        }
        & > div:last-of-type {
            rotate: -3deg;
            z-index: -1;
            background-color: #355e00bd;
            & > ul {
                animation-play-state: paused;
            }
        }
    }
    @keyframes anime {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-360px);
        }
    }

    .floating-banner {
        padding-block: 8em;
        position: relative;
        width: 100%;
        overflow: hidden;
        & > div {
            background-color: var(--color-primary-variant);
            position: absolute;
            top: 50%;
            left: -10%;
            transform: translateY(-50%);  
            rotate: 3deg;
            & > ul {
                margin-block: 0.5em;
                display: flex;
                font-size: 2.5em;  
                font-weight: 700;
                text-transform: uppercase;
                color: var(--color-bg);
                animation: anime 10s linear infinite;
                & > li {
                    flex-shrink: 0;
                    margin-inline: 0.5em;
                }
            }
        }
        & > div:last-of-type {
            rotate: -3deg;
            z-index: -1;
            background-color: #355e00bd;
            & > ul {
                animation-play-state: paused;
            }
        }
    }
    @keyframes anime {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-360px);
        }
    }

1 Reply

Kevin Powell•2y ago

Can't do much about the way the animation needs to start over, so what you need to do is actually double the thing you want to animate... like, repeat the entire list that's animating, and then do a translate for 50% of it. I did it here: https://codepen.io/kevinpowell/pen/rNQLQYe/07aab05e41d0c954498e34d07400c607 The only thing here is I'd use aria-hidden on the duplicated list items (I didn't do this in the codepen), so if a screen reader comes across this, it doesn't read the entire list out, since it just repeats itself.

Gaming

Programming

Marquee problem