FormidableLabs/nuka-carousel

Can we achieve a crossfade effect between slides when animation="fade"?

henrybabbage opened this issue · 1 comments

Bugs and Questions

Prerequisites

  • I've searched open issues to make sure I'm not opening a duplicate issue
  • I have read through the docs before asking a question
  • I am using the latest version of nuka-carousel

Describe Your Environment

  • What version of nuka-carousel are you using? ^6.0.3
  • What version of React are you using? 18.2.0
  • What browser are you using? Firefox

Describe the Problem

Not a bug per se, I would just like to ask how I can achieve a "cross-fade" effect when the animation prop is set to "fade"? Currently, when changing slides with the animation prop set to "fade", we see the current image disappear, a flash of the background behind where the image was, and then the next image appear. Swiper slider has a crossfade prop for example, so that the current image fades out and the next image fades in at the same time. Could this effect be achieved another way with the Nuka Carousel?

Here is a StackBlitz example with Nuka.

Here is an example of what I am trying to achieve (Swiper in this example).

Expected behavior:

animation="fade"

Images fade over the top of one another.

Actual behavior

One image fades out. The background is momentarily visible. Then the next image fades in.

Thank you very much for your time.