White flash in carousel fade transition

[Starc]

Hi Armin,

I'm using the carousel to animate the color of words inside a text block (text slides only).
However, I’ve noticed that the fade animation always shows a brief white flash between slides, as if it's not doing a proper crossfade. It seems like the previous slide disappears before the next one has fully faded in.

Is there a way to achieve a true crossfade, where the previous slide stays visible while the new one fades in over it?

I’ve already tried tweaking the CSS, but without success.

https://staging.gkdesign.it/carousel-test-armin/
In this example there is no custom css/js. Just the carousel with loop, autoplay and fade. Multiple text slides.

[arminunruh]

.lay-carousel.transition-fading .lay-carousel-slide.transition{
transition: opacity 300ms linear!important; 
}
.lay-carousel.transition-fading .lay-carousel-slide{
transition: opacity 300ms linear!important; 
}

Enter this css in "lay options" -> "custom css & html" -> "custom css"

Maybe only this is enough:

.lay-carousel.transition-fading .lay-carousel-slide.transition{
transition: opacity 300ms linear!important; 
}

[Starc]

Thank you @arminunruh

I tried your solutio but does not work, i m'still getting the white flash between transitions and also the opacity speed (300ms) is not applied.
I also tried after deleting all custom code and putting just yours but none

It would be really cool for me to make the carousel work well for this purpose.

[Starc]

The black parts of the text are flashing, even though they shouldn't change in a crossfade since they're the same between the first and second slide.

[arminunruh]

Hey, so. I think the one issue is on the transition easing function has to be linear, and before it was probably a different one.

You were talking about the 300ms not being applied, but looking at the code of the website, it does get applied. Maybe you were mixing it up with the speed of the autoplay, which you have to set in the carousel edit screen:

The autoplay has to be a bigger value than the 300ms we set for the opacity transition duration.

You could even try to set the transition duration much smaller, like this:

.lay-carousel.transition-fading .lay-carousel-slide.transition{
transition: opacity 100ms linear!important; 
}
.lay-carousel.transition-fading .lay-carousel-slide{
transition: opacity 100ms linear!important; 
}

This is basically just the same CSS I gave you in my last answer, but with a lower transition duration. So you could just replace the CSS you have now with this one.

[Starc]

I tried but it does not work, but I already knew that before trying.

It’s true that I could set a 1ms animation and wouldn’t see the flash, but that’s just because the animation would be imperceptible. Might as well set animation: none.
Maybe it’s not possible, or maybe I just haven’t managed to explain the problem clearly. I don’t know.

I’d really love to see the carousel slides animating by crossing into each other, without starting from a white background. 300-600ms animation, cross fade style between slides...

Do I really have to give up? It ""seems easy"" to me, but maybe it’s complicated and I just don’t understand.

[arminunruh]

yea i will need to take another in depth look here

[Starc]

Hi Armin, can u take it a look?

[arminunruh]

yea so i couldnt really figure out why this happens, makes no sense :/
im at a loss here

[Starc]

oh no! thank you, hope for future updates :)