Autoplay with fade (autoplay + classnames plugins)

[th-km]

@davidjerleke I successfully implemented the autoplay plugin with the jump parameter, but this time I'm trying to add a fade effect, and things start to be more complicated 😅

I'm pretty sure I did it in the past before the class names were extracted as a plugin. But this time, I'm not able to make it works and all slides have the is-selected classes in the React version.

It seems that the logic is within this toggleEmblaReady callback (JS version) to check when embla is initialized/resized, and maybe this internalEngine(), but I'm not quite sure to understand how it is working, and how to implement this in React.

I'd love to have your suggestion here.

I created two demos:

• JS version code and demo with the expected result
• React version code (broken) and demo

[davidjerleke]

Hi @th-km,

Thank you for your question.

It seems that the logic is within this toggleEmblaReady callback (JS version) to check when embla is initialized/resized, and maybe this internalEngine(), but I'm not quite sure to understand how it is working, and how to implement this in React.

That's correct. Embla needs to read the slide positions and dimensions to calculate the scroll snaps correctly before you start moving slides around. That's why you need to wait for Embla to initialize first before setting position: absolute; on your slides. The optimal solution to this would be to create an embla-carousel-fade plugin but lets see if I get time to do that in the near future. There's an issue for it here:

• [Feat]: Add a fade plugin #39

I've created a working CodeSandbox for you here:

• CodeSandbox
• App view

Let me know if it works as intended.

Best,
David

[th-km]

Hi @davidjerleke,

Thanks for the explanation and demo! I definitely work as intended, and I don't think I'd have nailed it myself 😅

An embla-carousel-fade plugin would be great of course, but it's still manageable to implement it from scratch once you have a better understanding of the Embla internals.