Animating slide width

[tobimori]

Minimal reproducible example: https://codesandbox.io/s/embla-carousel-align-vanilla-forked-h8k6w8?file=/index.html

I'm building a slider where slides can be expanded to show more information. I recreated this behaviour in the codesandbox above.
In some cases, the resizing results in Embla heavily "jiterring" which kinda makes the animation pointless.

I know this is kinda stretching Embla to its limits but I still want to find a solution if possible.

[davidjerleke]

@tobimori I think you need to use watchResize and only trigger resize when a slide isn’t being animated. Otherwise Embla will reInit on every single pixel change of the slide animation which I think is the reason to why you see "jiterring". You should try a similar approach to the nested carousels setup with watchDrag if that makes sense?

[tobimori]

While this fixes the jittering, other slides are not correctly aligning themselves anymore. See the Codesandbox for attempt. Any other idea?

[tobimori]

I managed to fix it by calling reInit from a requestAnimationFrame callback while the animation is loading and disabling the watchResize behaviour as said. Solution is implemented in the CodeSandbox above.

[davidjerleke]

@tobimori that solution seems to work well. Nice work and I hope your solution will inspire other devs too 🙂.