Re: Logo list animation

Solved

Logo list animation

JarnoBroekkamp
Excursionist
61 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
2350 702 827

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.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

BSS-TekLabs
Shopify Partner
2350 702 827

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.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
JarnoBroekkamp
Excursionist
61 0 6
BSS-TekLabs
Shopify Partner
2350 702 827

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.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
JarnoBroekkamp
Excursionist
61 0 6

Hi,

 

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