Infinite Scrolling Gallery Marquee

What You'll Create

A gallery that scrolls continuously in a slow, elegant loop—completing one full cycle every 90 seconds. This creates that subtle, high-end editorial feel you see on award-winning agency sites and luxury brand portfolios. The JavaScript component solves Squarespace's lazy-loading quirk, ensuring all your images appear instantly rather than awkwardly popping in as the marquee moves past.

The Problem It Solves

Squarespace's lazy-loading system is great for performance—but it causes images to appear blank until they enter the viewport. For a marquee animation, this means jarring pop-in as items scroll into view. Most solutions either disable lazy-loading entirely (hurting your site's performance) or require bloated third-party plugins. This technique forces only the marquee images to load immediately while keeping the rest of your site optimized.

Perfect For

  • "As Featured In" sections showcasing press logos

  • Client logo bars for service providers and agencies

  • Partner or sponsor showcases

  • Product collection highlights for e-commerce

  • Portfolio preview strips for photographers and creatives

  • Testimonial photo reels

What Makes This Different

The 90-second animation duration is deliberately slow—most marquees feel rushed and distracting at 20-30 seconds. This creates movement that's subtle enough to notice but not so fast that it pulls focus from your content. The technique uses MutationObserver to catch images even when Squarespace dynamically updates the DOM, and it's section-scoped via ID selector so you can use this on one gallery without affecting others across your site.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS + JavaScript

  • Prerequisites: Gallery Section with Grid layout. You'll need to add your section ID to the CSS selector.

  • Toolkit Title: Infinite Scrolling Gallery

See It In Action

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Previous
Previous

Category Dropdown from Markdown

Next
Next

Mobile Swipe for Carousel Summary Blocks