[Help]: Transition on pointerUp event only - help and advice needed

[joakim-roos]

Hi,

Recently I found this sandbox which enables use to cross-fade images for our clients, very grateful for sharing this approach!
https://codesandbox.io/s/embla-carousel-github-issue-39-sdkul

Using Embla for almost our clients - what we now are looking for is to do the transition to the next slide on the "pointerUp"-event.
Similar to the above mentioned sandbox, where the next slide fades in when the you release the grab - we want the image to slide in.

I've been testing a few approaches and the closest to good UX/UI would be this sandbox:
https://codesandbox.io/s/damp-hooks-r2muc1

It somewhat works,, but we want the slide to start animating on the pointerUp-event so we get the full transition. If you do a wide drag the slide jumps into place - also the first slide disappears after a full run (i've added loop: true).

Any idea how to approach this? ⭐

Thanks,
Joakim

[davidjerleke]

Hi @joakim-roos,

Thank you for your question.

Recently I found this sandbox which enables use to cross-fade images for our clients, very grateful for sharing this approach!

Which sandbox is this? Would you mind sharing the link?

Best,
David

[joakim-roos]

Hi @joakim-roos,

Thank you for your question.

Recently I found this sandbox which enables use to cross-fade images for our clients, very grateful for sharing this approach!

Which sandbox is this? Would you mind sharing the link?

Best, David

Hi @davidjerleke,

I've updated the main post with the relevant sandboxes :)

Thanks for having a look!

[davidjerleke]

Hi @joakim-roos,

I'm not happy with the long response time but I'm the sole dev in this project and have a lot to do before the stable v8 release. I hope you understand.

I've had a little bit of time to look into this and I would categorise your request as a special case, meaning that this can only be achieved in an unofficial way utilising the embla.internalEngine(). This has consequences and the most important one being:

• I can't guarantee that all Embla options or features will work with your special case.

As much as I want to help everybody with their request, special cases are not prioritised among other things because most Embla users won't need this.

Having said that this seems doable with the help of the internal engine method of Embla. But if you need to get this done soon I would suggest using a different library for this special case.

Best,
David

[joakim-roos]

Hi David,
I completely understand and no worries at all! We'll keep using Embla Carousel as this is not something we see missing or a feature that is a must have - it's a special use case for one of our clients and solely a nice-to-have.
After some more testing we do indeed also see the need for embla.internalEngine(), and if we get something that works good for us I'll gladly share a sandbox here for others to see if they're looking for something similar.

Thank you!