CSS infinite logo horizontal scroll issues

Hi i’m trying to build a pure CSS infinite brand wheel scroller. I am having a few issues with logo spacing, preventing the logos overlapping with each other and ‘on load’ the logos starting off screen and you have to wait for them to scroll into scope.

image

I saw a really cool cheat online with the animation where you add a delay and apply it to the secondary logo wheel which helps give off the infinite scrolling illusion.

My HTML:

<div class="container">
  <div class="brand-wheel">
    <div class="brand-slide">
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/0000FF">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/FF0000">
      </div>
      <div class="logo-div">
       <img alt="#" src="https://via.placeholder.com/150/024ah">
      </div>
      <div class="logo-div">
               <img alt="#" src="https://via.placeholder.com/150/735CDD">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/C8E087">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/2274A5">
      </div>
      <div class="logo-div">
             <img alt="#" src="https://via.placeholder.com/150/E6AF2E">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/B33951">
      </div>
    </div>
    <div class="brand-slide delay">
            <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/0000FF">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/FF0000">
      </div>
      <div class="logo-div">
       <img alt="#" src="https://via.placeholder.com/150/024ah">
      </div>
      <div class="logo-div">
               <img alt="#" src="https://via.placeholder.com/150/735CDD">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/C8E087">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/2274A5">
      </div>
      <div class="logo-div">
             <img alt="#" src="https://via.placeholder.com/150/E6AF2E">
      </div>
      <div class="logo-div">
        <img alt="#" src="https://via.placeholder.com/150/B33951">
      </div>
    </div>
  </div>
</div>

My Css:

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.container {
  border-bottom: 1px solid black
}

.brand-wheel {
    flex-direction: row;
    align-items: center;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 100px;

    --animationspeed: 45s;
    --animationdelay: calc( var(--animationspeed) / 2 );
}

.brand-wheel::before {
    position: absolute;
    background-image: linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    content: '';
    height: 100%;
    width: 5%;
    z-index: 2;
    pointer-events: none;
}
.brand-wheel::after{
    position: absolute;
    background-image: linear-gradient(to left,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    content: '';
    height: 100%;
    width: 5%;
    z-index: 2;
    pointer-events: none;
    right: 0;
}

.brand-slide {
    flex-shrink: 0;
    position: absolute;
    animation-name: slidelogo;
    animation-duration: var(--animationspeed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.brand-slide.delay {
    transform: translateX(100%);
    animation-name: slidelogo;
    animation-delay: var(--animationdelay);
}

.brand-wheel:hover .brand-slide {
    animation-play-state: paused;
}

.logo-div {
    display: inline-flex;
    align-self: center;
    animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
    padding: 0 20px 0 20px;
}

@keyframes slidelogo {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

If you play with the codepen preview window size you can see what i’m having issues with.
Live Demo: CSS Infinite Scroller (codepen.io)

Am i using the ‘transform’ incorrectly? Would love to see what i’m doing incorrectly. Thanks very much :slight_smile:

To stop them overlapping remove the width from here and use min-width instead.

.brand-slide {
    flex-shrink: 0;
    position: absolute;
    animation-name: slidelogo;
    animation-duration: var(--animationspeed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /*width: 100%;*/
min-width:100%;
    display: flex;
    justify-content: space-around;
}

I think you will need two keyframes and have both animating at the same time from their respective offset positions.

e.g.

I thinks that’s close to what you want.

1 Like

That’s exactly it! I was close yet so far haha. Thanks so much Paul. I always really appreciate your help :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.