Jump to content

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

Recommended Posts

On 8/11/2022 at 5:45 PM, lexi315p said:

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!

Has anyone gotten this to work consistently? 

I'm seeing a softer fade in the initial slide - but then each image is still snapping.

Link to comment
  • 2 weeks later...
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?

Annotation 2020-05-01 113228.png

hello,

can this code be made to work in the gallery slideshow simple with either scale up or fade?

thanks!!

J

Link to comment
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.

Is there a way to make this work for the simple slideshow?

Thanks 

Link to comment
  • 4 months later...
  • 1 month later...

Following up this. The code works beautifully about 25% of the time. It randomly works, then doesn't. Sometimes it works in Chrome but not Safari and vice versa. Has anyone found a more reliable, consistent code for getting a fade between all slides on a Slideshow: Full Autoplay?

Link to comment

Hey gang, I took a stab at a different solution and it seems to be working on my end. Check out the CSS below if you're using Slideshow Full, I also have some CSS in an article here if you're using Slideshow Simple -- it's the same idea with a few small tweaks. 

Basically I'm using CSS animations instead of transitions. Seem to work better since the slides are getting moved around in the DOM. Watch this if you're curious

Let me know if there are any issues, I'll keep iterating as I can. 

Will

/**
* Slow Cross Fade
* Gallery Type » Slideshow Full
* From Will-Myers.com
**/
#sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  --duration: 2s;

  figure,
  .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
  figure:last-child {
    animation: fadeIn var(--duration, 2s) ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

 

Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership
  
I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - I'm an expert in 2 of these. 

Youtube | Website

Link to comment
  • 2 months later...

Hi @WillMyers - looks great, thank you.

Finding if you try and use the slide controls (arrows, or using the mouse to drag to the next image etc) - then it seems confused and jumps between 2 slides. Like it's trying to load against the user navigating manually.

Is that expected / any fix for that?

Thank you, Mike.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.