How to Slow Down the Fade Transition in Squarespace 7.1 Gallery Slideshow

Squarespace 7.1 comes with beautiful, modern & simple Gallery Slideshow Blocks, which have a default fade transition between slides. This action works, but it tends to be too harsh, and in this case, it undermines the decorum and rhythm of your visual storytelling.

If you’ve ever wanted to reduce the speed of the fade transition in your slideshows, then this is the perfect tutorial for you, in which I'll guide you step-by-step to slow down the fade effect using “clean", easy-to-understand, performance-oriented CSS.

• No plugins.

• No JavaScript.

• No developer mode required.

Why Adjust the Fade Speed?

Making the transition slower adds a nice visual to your site. Here's why it matters:

• Improves storytelling – it's especially useful if you are creating a creative portfolio, personal stories, or product presentation.

• Enhances UX – Tranquil animations give way to the perception of greater design intent and depth to an experience

• Progressive enhancement – works better on mobile, where speed is crucial

• Add some luxury if you want – these are some sluggish transitions, indicative of a more premium design feel

The Core Concept

The default fade uses an opacity transition. Squarespace does not provide this setting in the UI, but it's relatively easy to override with Custom CSS. This method focuses on slideshow slides and changes the duration of their transition.

Step-by-Step Implementation

Step 1: Access the Custom CSS Panel

From your Squarespace dashboard, go to
Go to Pages → Custom Code → Custom CSS

Step 2: Add the Following Code

Copy

Copied!

/* Slow down Gallery Slideshow fade effect */
.sqs-gallery-block-slideshow .slide {
  transition: opacity 1.5s ease !important;
}
/* Optional: improve background fade smoothness */
.sqs-gallery-block-slideshow .slide-background {
  transition: opacity 1.5s ease !important;
}
  

What This Code Does:

• opacity 1.5s ease: Increases fade time from the default (~0.5s) to 1.5 seconds

• !important: Ensures your custom timing takes priority over built-in styles

• ease: Applies a natural easing curve for a smoother animation

Customize the Speed

To create a slower, more cinematic effect, you can extend the transition:

transition: opacity 3s ease;

This results in a gentle 3-second fade between slides, ideal for portfolios, high-end brands, and storytelling experiences.

Optional Enhancements

1. Fade + Subtle Zoom for a Premium Touch

Combine fading with a slow zoom effect to elevate your slideshow design:

Copy

Copied!

.sqs-gallery-block-slideshow .slide img {
  transform: scale(1);
  transition: .5s ease !important;
}
.sqs-gallery-block-slideshow .slide:hover img {
  transform: scale(1.05);
}
  

This adds a soft, zoom-in effect on hover, delivering a luxurious, interactive feel.

2. Apply Different Speeds for Mobile Devices

For a tailored mobile experience, use a media query:

Copy

Copied!

@media screen and (max-width: 767px) {
  .sqs-gallery-block-slideshow .slide {
    transition: opacity 2s ease !important;
  }
}
  

This ensures a slower, more digestible transition on smartphones, improving mobile UX.

How to Use This Site-Wide

1. Open any page with a Gallery Slideshow Block

2. Navigate to Go to Pages → Custom Code → Custom CSS

3. Paste your preferred version of the CSS

4. Save your changes and preview

These styles will now apply to all slideshow blocks across your entire website.

Final Thoughts

Squarespace 7.1’s Gallery Slideshow is pretty slick out of the box, but changing the fade speed can have a big impact. All that and more, with only a couple of lines of CSS:

• Decelerate transitions for visual flair

• Improve storytelling and flow

• Improve the perceived value of the brand

• Provide a seamless user experience across all devices

---

Frequently Asked Questions

• 1. Why does the default slideshow fade transition feel too fast in Squarespace 7.1?

  Squarespace uses a built-in opacity transition of around 0.5 seconds for Gallery Slideshow Blocks. This quick fade may feel abrupt, especially for storytelling, portfolio showcases, or luxury branding.

• 2. Can I slow down the fade transition without using any plugins or Developer Mode?

  Yes. You can simply use a few lines of CSS in the Custom CSS panel—no plugins, JavaScript, or Developer Mode required.

• 3. What’s the exact code to slow down the fade effect?

  Paste the following CSS into Go to Pages → Custom Code → Custom CSS

  .sqs-gallery-block-slideshow .slide {

    transition: opacity 1.5s ease !important;

  }

  .sqs-gallery-block-slideshow .slide-background {

    transition: opacity 1.5s ease !important;

  }

  This increases the fade duration to 1.5 seconds and applies a smooth easing curve.

• 4. Can I make the transition even slower for a cinematic effect?

  Yes. Just adjust the time value in the code. For example:

  transition: opacity 3s ease;

  This creates a 3-second fade, ideal for luxury brands and portfolio storytelling.

• 5. Will this CSS affect all slide shows across my site?

  Yes, this method applies globally to all Gallery Slideshow Blocks on your Squarespace site. You only need to paste it once in the Custom CSS panel.