Infinite Scrolling Logo Carousel | Squarespace 7.1

What does this code do?

This code snippet will allow you to add a strip of logos that continuously scroll across your Squarespace Website.

Note: You will not be able to add individual links to the logos with this method.

Video Tutorial

Make Your Logo Wall

Go to a program like Canva and add your logos to an image in a single strip. This image should be 3000px long. I suggest a height of around 300px but you can adjust the height depending on your logos. Make sure to evenly spread your logos out (including on the ends).

Then add your logo strip image to a Slideshow:Reel Section in Squarespace.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Infinite Logo Scroll */
#SECTIONID .gallery-reel-list {
  animation: scroll 20s linear infinite;
  display: flex;
  width: 3000px;
  overflow: visible;
}

@keyframes scroll {
	0% { 
      transform: translateX(0); 
  }
	100% { 
     transform: translateX(-1500px);
  }
}

Then add your section id and adjust the animation seconds to speed up or slow down the scroll.

Bonus

Use this code snippet to adjust the height even further. (Just don’t use the media query so that it also adjusts on desktop.

How To Use It

1. Make your logo image.

2. Add it to a Gallery Reel Section.

3. Copy and paste the code as indicated above.

4. To learn how to find a block id check out our Start Here guide.

5. Adjust the speed.