How to create horizontal scrolling images in Squarespace / Squarespace Scrolling Images Tutorial

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 video and follow these steps:

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: Update the code time, width, and keyframe percentage for your unique website style

And there you have it – a set if 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.

- - -
- - -
- - -
- - -
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

[InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[JimSewell]

This is exactly what I needed for my church's website and I got it running in about 10 minutes. Thank you!

[SalenaLisner]

Also adding a comment for infinite looping here!
I was having an issue where my gallery would glitch start over from the beginning, so I added images one two and three again and adjusted the timing and keyframe percentages until it was perfectly lined up. It's technically still "restarting" but by the time those repeat images show up on the very left, it is perfectly restarted to the original first three images so that restart glitch isn't visible.

I will say that this is entirely dependent on how many images and columns you have too (as in how many images are visible on your screen from left to right, mine happens to be 3 image screen width). Anyway, just something that is definitely fixable with a lot of little tweaks!

[r.m.chastain.creative]

Almost 9 months later and this still works like a charm. Thank you so much for making this!

[nickjohnso]

This is great! Thank you!
I wish there was a way to have it infinity scroll, like the first image following the last, but for most use cases, mine included, this is great!

[jeffdenapoli]

found this and had a grid looking and moving exactly how I wanted it in maybe 6 minutes. unbelievable - thanks!

[OrincyWhyteDesigns]

Haven’t played with vanilla css animations in a while!! Incredible video!

[dripps]

Something to note that took me a while to troubleshoot and might help someone else out:
If you want two scrolling slideshows on your website with different variables for speed and length, first copy and paste the code twice and input different sections in front of the corresponding .gallery-grid-wrapper like she explains in the video. Then what I learned is where you see the word "slideshow" in 2 places (animation: slideshow and @keyframes slideshow) that is a variable, and you need to name it something new (slideshow2, photos2, etc.) on the second slideshow.

[konaing]

Thanks Becca. Your tutorials are always helpful.🙏

[rrheadlabs]

This is amazing, your tutorials are so helpful!

[erisiabatto]

works like a treat! thanks for this! 🤩

[nicolaslondon]

Hi becca, thanks for this video. when all immages were showed the animation restart roughly restarting from the first immage. How to avoid this ?

[mindpotato]

hey, not sure if you're still checking this but i have a question. i noticed squarespace was purposefully lowering the quality of my pictures in the gallery as part of their optimisations, is there a way to bypass these optimisations? thanks!

[fragosocd]

Hello i added this and i love it, though is there a way to add a text box to the top?
thanks!

[GK__]

Thank you very much! This is very helpful and clear👍👍👍

[zomzom]

Thank you Becca! This is really helpful. By the way, I've been trying to figure out how I could make a background transparent/ or replace a background with an image. Could you please help? I'd really appreciate 🙏

[RylieSchroeder-mf]

This is so helpful, wow! Now is there a way to add more than 6 images in the gallery block?

[KerryLyons]

This was super helpful – thank you so much. It'd be great to get some guidance on the mobile layout if possible? I have a logo slideshow that either looks great on desktop, but minuscule and illegible on mobile, or great on mobile, but large and oversized on desktop. So grateful for your support 🙏🏻

[tuanvinhnguyen]

Thanks Becca a lot for this tutorial ! I'd like to know if you encounter the problem of jittery when images are moving to the left, the horizontal scroll works great in my site but it seems that the images border are flickering, a bit laggy when moving, how would you fix this problem?

[trythisout]

Its helpful. But I adjusted everything as per desktop screen - however, on mobile the auto-flow images are very small in size. Is their any responsive adjustment for it? Please advise