Marquee Component

marquee.scss

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--offset));
    }
}

.c-marquee {
    --scrolling-speed: 2s;
    --offset: -50%;

    display: flex;
    width: 100%;
    overflow: hidden;

    @include max-width(tab-lg) {
        align-items: center;
        height: var(--c-header);
    }

    span {
        position: relative;
        width: fit-content;
        padding-right: var(--padding);
        white-space: nowrap;
    }

    &:not(.is-enabled) span {
        animation: marquee var(--scrolling-speed) linear infinite;
    }

    &__inner {
        position: relative;
        display: flex;
        align-items: center;
        width: fit-content;
        transition: opacity 1s;
        will-change: transform;

        span {
            width: fit-content;
            white-space: nowrap;

            &::after {
                margin-left: var(--padding);
                content: "· ";
            }
        }
    }
}

<div class="c-marquee">
        <div class="c-marquee__inner">
            <span></span>
            <span></span>
            <span></span>
          </div>
    </div>