Logo list animation

Solved

Logo list animation

JarnoBroekkamp
Excursionist
58 0 6

 

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.

 

Image 22-06-2024 at 09.11.jpeg

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
556 159 188

This is an 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!

 

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSS-TekLabs
Shopify Partner
556 159 188

Hi @JarnoBroekkamp,

Can you share the store link?

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
JarnoBroekkamp
Excursionist
58 0 6
BSS-TekLabs
Shopify Partner
556 159 188

This is an 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!

 

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
JarnoBroekkamp
Excursionist
58 0 6

Hi,

 

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