How can I edit the Dawn theme slideshow to fade instead of slide?

[ScentFluence]

I would like to change my gallery to a fade from a slide.

[Ollie · Accepted solution]

Hey @ScentFluence.

Thanks for reaching out.

I appreciate that you have let us know which theme you are using as that is very helpful! This is a great question.

Looking into the Dawn theme, I noticed that changing the transition of the slides is not available using the Theme Editor. However, you could make a change to the theme's coding to have it displayed as you would like. Since the Dawn theme is designed and supported by Shopify, we may be able to use free design time for Shopify themes to make this customization.

If you are interested in using the design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner. Once you successfully login - you will be directed to the Help Center. Select the topic that you would like assistance with to locate the options to Get Support and speak with a Support Advisor about the changes you would like to see.

Alternatively, if you are interested in hiring an individual to complete this task for you, you can look to reach out to our Shopify Experts.

Let me know if you have any questions or concerns.

[ScentFluence]

Thanks.

Would be nice to have this option without coding.

[Ollie]

Hey @ScentFluence.

Thanks for the quick response.

I can certainly see the benefit of allowing you to make these changes using the Theme Editor. With that being said, I am going to provide this thread to our developers as a suggestion to include in the future. We appreciate you reaching out with this feedback!

Let me know if you have any questions.

[ScentFluence]

Thank you

[AdamWestonArt]

I love Shopify and just switched my site over from Squarespace.

I too would really like to have a simple crossfade between slides instead of the existing "Slide to Left" without coding or paying for an app.

I've searched extensively and can't seem to find a simple answer to this needed option.

Built into Squarespace were simple controls to allow your slides to crossfade (vs scroll), and also hide the controls and slide numbers.

Please add this missing feature to your great platform!
Thanks!

[1989streetwear]

Hi @AdamWestonArt, I am looking to change the slide effect to crossfade too. Any luck with finding a solution?

[ExpertRookie]

@ScentFluence 

I think you need to hire an expert to change or create a new slideshow section with fade animation

[GemPages]

Hi @ScentFluence 

You can try to follow this solution to make Slideshow To Fade  https://community.shopify.com/c/shopify-design/change-duration-time-and-effect-for-slideshow-on-dawn...

Kind & Best regards,
GemPages Support Team

[mintenzee]

Hi there,

You can add the code below to component-slideshow.css

slideshow-component .slideshow.banner{
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}

@keyframes fadeIn {
0% { opacity: 0.5; }
100% { opacity: 1; }
}

@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0.5; }
}

slideshow-component .slideshow.banner [aria-hidden="false"] {
animation: fadeIn 200ms, fadeOut 200ms 4800ms;
}

There is one point to note here. For fadeOut, the animation time + animation delay time should match the slide time you set in theme customization section.  In my case, 200ms + 4800ms matched the total slide time I had set which was 5s. 

[1989streetwear]

Hi @mintenzee Thank you so much for this code. It does work!!

Is there any chance to change the fade transition opacity in a dark colour like black?

[osk3]

This solution would work fantastically but as usual there is no option to disable the pause on cursor hover - so even if you set the fadein/ fadeout timings correctly, if the user scrolls over the area it will make the slide change out of sync with the fade.. Brilliant how limiting Shopify is as a whole. The fix for something like this on WordPress would take 2 seconds.

[CooperElliott]

Adding [aria-live="off"] to the selector for the animation should solve this issue as long as you don't need a fade-in animation. If you keep the fade-in animation it will trigger whenever you stop hovering over the slideshow.

So the css for the animation would look like this:

slideshow-component .slideshow.banner[aria-live="off"] [aria-hidden="false"] {
    animation: fadeOut 200ms 4800ms;
}

For anyone who just wants to stop the default slide animation and doesn't care about animating a fade the only css you need to add to the component-slideshow.css file is:

slideshow-component .slideshow.banner {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

or you can change the scroll-behavior in the component-slider.css file.

[Alejandrouda]

Hi there!

It seems like what is problematic is the fact that there is a timeout to run the animation. If you don't enable automatic slideshow, after 5 seconds you can see the fade out animation, without having changed the slide.

I'm not an expert on CSS, though would it be possible to just perform this animation whenever any of the following two actions happens?

• A click to change slide
• Having enabled the auto slides, whenever the js code execute the change

Thank you!