How to create horizontal scrolling images in Squarespace

Apr 18

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

The scrolling marquee block is an exciting content block available in Squarespace. The second it came out, I released a brand new video to teach people how to use it! The number one thing that people wanted to do was display images in this content, which it just couldn’t do.

But lucky for us, we can still make that magic happen on a Squarespace website thanks to CSS!

In this tutorial, you’ll learn how to set up a gallery section in Squarespace 7.1 and then use custom code to animate it so the images scroll across the screen.

When you’re ready to give it a try, watch the tutorial below and use the codes underneath it on your own website.

Step 1: Create a Gallery Section

First things first, you’ll need to create a Gallery Section in Squarespace. To do this, open up your site editor, and select Add Section. Select Images from the menu and pick an auto layout indicated by the ⓘ in the top right-hand corner of the preview.

Step 2: Add Your Images

Upload your images to the gallery section and be sure to set the design layout to Grid: Simple.

Step 3: Add Custom CSS

Now for the fun part – adding some custom CSS to create the scrolling effect! For this scrolling image marquee, we’ll be using the CSS animation property. Here’s the code you’ll need to add.

#page {
overflow-x: hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -225% }
}

Step 4: Modify the code
Update the animation duration (30s) to the number of seconds you want this to take, 100s being a slow animation and 10s being super fast. If you adjust the min-width percentage to increase or decrease the sie of the images, be sure to edit the last keyframe percentage so all of the images are visible.

Optional: Apply this to a specific gallery section
Use the collection id to apply this animation to a specific gallery section. Here is a link to the free Chrome extension that I used in the video; not affiliated with this extension or its creators, just a fan! https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

And there you have it – a set of horizontally scrolling images on your Squarespace website! With a bit of custom CSS, you can create a unique and eye-catching effect that will impress visitors and make your site uniquely yours.