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:
Start, scale & systemise your web design agency.
I bootstrapped my agency from zero to seven figures. The Margin is the operating system I wish I'd had.
Join The Margin
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%;
}
}
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
