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
/* 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:
.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:
@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
Open any page with a Gallery Slideshow Block
Navigate to Go to Pages → Custom Code → Custom CSS
Paste your preferred version of the CSS
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 (FAQ)
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.
6. How can I apply a different fade speed for mobile users?
Use a mobile-specific media query:
@media screen and (max-width: 767px) {
.sqs-gallery-block-slideshow .slide {
transition: opacity 2s ease !important;
}
}
This helps mobile users experience a slower and more digestible visual transition.
7. Can I add a zoom effect on hover for a more modern look?
Yes. Use this optional CSS to add a soft zoom-in effect on hover:
.sqs-gallery-block-slideshow .slide img {
transform: scale(1);
transition: .5s ease !important;
}
.sqs-gallery-block-slideshow .slide:hover img {
transform: scale(1.05);
}
8. Will this customization slow down my website?
No. These are lightweight CSS-only changes and won’t negatively impact site performance or loading times.
9. Do I need to reapply the CSS if I change my template or add new galleries?
No. As long as you keep the code in Go to Pages → Custom Code → Custom CSS, it will automatically apply to any Gallery Slideshow Blocks — even in newly added pages or template sections.
