How to slow down the fade transition in a 7.1 Gallery Slideshow

Hi,

The fade transition time between images in a 7.1 Gallery Section Slideshow is too abrupt. SS cannot assist as it requires code injection. Does anyone know of some code that will slow the fade down so there is a slow cross-fade effect between images? The code below works in 7.0 (in the page's CSS) but it doesn't work in 7.1 (Gallery Section inserted into a Blank Page).

Many thanks.

<style>
.slide { visibility: visible !important;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out; }
 </style>

On 11/21/2019 at 2:01 AM, casson said:

<style>
.slide { visibility: visible !important;
-webkit-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out; }
 </style>

Would love to see if anyone has been able to work this out. I'm not much of a code expert, at all, but I would really like to use this on a clients site if it can be done.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

12 hours ago, rwp said:

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

Hi @rwp thanks for your help! I tried to use your code on my website but it doesn't seem to be working.. The slow fading happens only when the gallery slideshow appears at page load but not when it flicks through the different images. 

Any chance you can have a look at it? The website is: https://villa-rondinelli.squarespace.com/home/it

Password: maggie-villa

Thanks!

6 hours ago, MaggieBovary said:

 

Hi @rwp thanks for your help! I tried to use your code on my website but it doesn't seem to be working.. The slow fading happens only when the gallery slideshow appears at page load but not when it flicks through the different images. 

Any chance you can have a look at it? The website is: https://villa-rondinelli.squarespace.com/home/it

Password: maggie-villa

Thanks!

 

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

1 hour ago, rwp said:

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

 

Tried both ways and still doesn't work 😞

I really have to say, so far I am tremendously disappointed with SquareSpace 7.1, its an absolute nightmare to do any customization, and basic things just don't work/aren't user adjustable.

Combing though 1000's of lines of CSS to change the speed of a slide show are crazy, especially when it doesn't work on a second slide show because a setting or two is different.

I've already spent about 4 hours today trying to get anchor links to work correctly because there are no more section ID's assigned when the page is generated.

9 minutes ago, rwp said:

I really have to say, so far I am tremendously disappointed with SquareSpace 7.1, its an absolute nightmare to do any customization, and basic things just don't work/aren't user adjustable.

Combing though 1000's of lines of CSS to change the speed of a slide show are crazy, especially when it doesn't work on a second slide show because a setting or two is different.

I've already spent about 4 hours today trying to get anchor links to work correctly because there are no more section ID's assigned when the page is generated.

That's true, I hope they can fix the 7.1 issues soon.. I'll definitely use 7.0 next time. Thanks a lot for your help anyway!

Just now, MaggieBovary said:

That's true, I hope they can fix the 7.1 issues soon.. I'll definitely use 7.0 next time. Thanks a lot for your help anyway!

I will try to check it out a bit more later on.  If I can get the anchor links fixed at some point today.

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine.

Lets start with the basics, is it a gallery block?

If so, do your settings look like this?

On 5/1/2020 at 10:22 PM, rwp said:

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine.

Lets start with the basics, is it a gallery block?

If so, do your settings look like this?

I've just adjusted that and it works!! Thank you so much @rwp 🙏🙏🙏

49 minutes ago, MaggieBovary said:

I've just adjusted that and it works!! Thank you so much @rwp 🙏🙏🙏

Great!

I agree the fading transition is too abrupt. I've tried the Custom CSS tweaks mentioned above but it doesn't consistently work. Sometimes the slower fade transition occurs but at random times it just changes images without a fade transition at all which isn't good enough.

This is the first time I've evaluated using SS for a site build but because of this I won't be using it for the next site I'm going to be working on.

Hopefully this issue is addressed in future.

@rwp - this is fantastic, thanks so much.

Hey guys!  I think I found a fix!  Shoutout to Tiffany Davidson for posting!  Copied below from her website:

.slide { 
visibility: visible !important; 
-webkit-transition: opacity 3s ease-in-out; 
-moz-transition: opacity 3s ease-in-out; 
-o-transition: opacity 3s ease-in-out; 
transition: opacity 3s ease-in-out; }

🙂

On 5/1/2020 at 10:36 PM, rwp said:

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

 

Worked great. Thank you!

Hi

fresh from Wordpress over to Squarespace now.

At what place do i have to put the code, and should this work with large hight gallery also?

Thank you

On 5/1/2020 at 5:36 PM, rwp said:

Hey @MaggieBovary

Lets try this...... I commented out one part of the last line. That line can be removed is this works.

Edit: Also, if this doesn't work, try turning off the dots for the different images, I am not sure if that will matter, but if it does I will look into it.  There's like 300 lines of code for the slide show, so its a disaster to mess with.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

 

Hello, can you tell me where this should be added? Thank you! Julia

On 1/31/2022 at 2:33 AM, puslingpaahaender said:

Hello, can you tell me where this should be added? Thank you! Julia

Home > Design > Custom CSS

Can someone help me figure out the problem with mine? I only see the applied styles working once the slideshow loops through (approx) 2 times. Super strange? Unsure how it would be targeting just the third cycle?

site pass: HH$!

URL: https://pug-clementine-xr4j.squarespace.com

On 4/30/2020 at 4:12 PM, rwp said:

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

This worked for me, but it seems like there are certain images that it skips the delayed fade, any ideas as to why? its very infrequent and hard to diagnose...

On 4/30/2020 at 4:12 PM, rwp said:

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

Hi, Thank you for this code! It is exactly what I'm looking for, however while in Chrome, it is also fading sometimes and snapping others. There doesn't seem to be a rhyme or reason to when it does and doesn't work. Did you ever happen to get an answer on this? Or a fix to make it consistently fade? Thanks!

On 4/30/2020 at 10:12 PM, rwp said:

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

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

Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).

Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.

I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

@rwp Thank you so much for this. I have recently migrated to SS and straight into 7.1. I have tried all solutions on this thread and yours worked for my gallery slide show on landing page!

On 5/1/2020 at 11:22 PM, rwp said:

Alright, so I poked around a bit more. It's hard to see whats really going on without being logged into your page, but something about it is set up differently than mine.

Lets start with the basics, is it a gallery block?

If so, do your settings look like this?

Hi! I might be picking on words here, but do you mean Gallery Section? Because I think there are not Gallery Blocks in 7.1. The reason I'm asking is because I have a Gallery Section with a slideshow, and I don't get the code to work. What am I doing wrong? 

All the best,

Mateas