How to create horizontal scrolling images in Squarespace

page section

Sep 10

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.