Slow Down the Fading Transition on a Slideshow Gallery Section | Squarespace 7.1

What does this code do?

You may find that the Fading animation on your slideshow gallery section is quite abrupt. This code snippet will allow you to change the speed of the Fading transition animation so that it fades more smoothly.

Set Up Your Slideshow Gallery Section

Click the pencil on your Slideshow Gallery Section and make sure you have Autoplay on and the animation set to “Fading”.

Code Snippet

Copy and paste the code for your slideshow type into Design > Custom CSS

Slideshow: Simple

.gallery-slideshow[data-transition="fade"] 
.gallery-slideshow-item[data-active="true"] .gallery-slideshow-item-src{
    transition: opacity 1000ms ease-in-out !important;
    -webkit-transition: opacity 1000ms ease-in-out !important;
    -ms-transition: opacity 1000ms ease-in-out !important;
    -moz-transition: opacity 1000ms ease-in-out !important;
    -o-transition: opacity 1000ms ease-in-out !important;
}

Then change the number 1000 to adjust the fading animation speed.

Slideshow: Full

.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
    transition: opacity 1000ms ease-in-out !important;
    -webkit-transition: opacity 1000ms ease-in-out !important;
    -ms-transition: opacity 1000ms ease-in-out !important;
    -moz-transition: opacity 1000ms ease-in-out !important;
    -o-transition: opacity 1000ms ease-in-out !important;
}

Then change the number 1000 to adjust the fading animation speed.

How To Use It

1. Copy and paste the code as indicated above.

2. Change the number 1000 to adjust the fading animation speed.