Autoplay gallery reel Squarespace 7.1

In this article, you’ll learn how to create an autoplaying gallery reel in Squarespace 7.1 - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!

---

1. Why use this code?

This code works really well for displaying client logos in a dynamic manner and adds depth to a page. You can see the code in action on my homepage below:

---

📩 Join the inner circle to get exclusive code updates

---

2. The code

Paste where? Design > Custom CSS

.gallery-reel-wrapper   {

overflow: hidden;

}

.gallery-reel-list  {

width: 2912px;

animation-name: autoplay;

animation-duration: 30s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-direction: normal; 

animation-play-state: running;

}

.gallery-reel-list:hover {

animation-play-state: running;

}

@keyframes autoplay {

0% {

margin-left: 0px;

}

  50% {

margin-left: -50%;

}

  100% {

margin-left: -100%;

}  

}

---

3. Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?