Logo list animation

[JarnoBroekkamp]

Hi everyone, 

I use a logo list to showcase the partners we work with, but on mobile it looks like this in 2 rows. Is it possible that only 2 are showcased in 1 row and the other ones animate in a kind of slideshow.

[BSS-TekLabs]

Hi @JarnoBroekkamp,

Can you share the store link?

[JarnoBroekkamp]

www.ateliercharisma.com

[BSS-TekLabs · Accepted solution]

Hi @JarnoBroekkamp,

You can follow these steps to make a logo list animation on small screen

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.css (or base.css, custom.css, styles.css) file

3. Paste the code snippet below to the bottom of the file and hit save

@media (max-width: 699px) {
  .logo-list {
      position: relative;
      width: 100%;
      height: 100px;
      overflow: hidden;
  }
  
  .logo-list__item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      opacity: 0;
      transition: opacity 1s ease;
  }
  
  .logo-list__item:nth-child(1) {
      animation: slide-in 12s infinite 0s;
  }
  
  .logo-list__item:nth-child(2) {
      animation: slide-in 12s infinite 3s;
  }
  
  .logo-list__item:nth-child(3) {
      animation: slide-in 12s infinite 6s;
  }
  
  .logo-list__item:nth-child(4) {
      animation: slide-in 12s infinite 9s;
  }
  
  @keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    8% {
        opacity: 1;
        transform: translateX(0%);
    }
    25% {
        opacity: 1;
        transform: translateX(0%);
    }
    33% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
  }
}

Here is the result

https://www.loom.com/share/290af66a30114b46bc03ba09984186b7

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[JarnoBroekkamp]

Hi,

We are adding another store to our retailer list, how can i also add that logo to the animation?