[Bug]: Animation doesn't work when updating options with `reInit` about embla-carousel

[rodrigovallades]

@sarussss The requirement is that reInit should be only fired after the first user interaction. Initially, the carousel must not loop. So I'm not sure that listening to the init event would be helpful here.

I believe that the only available event that is fired on user interactions (after the current index has been changed( is the select event, that's why I'm trying to use it.

[davidjerleke]

@rodrigovallades I haven't investigated yet so can't be sure but it might be related to this bug:

• #720

There's already a bug fix done for that but it hasn't been released yet. It will be released with v8.0.0-rc23.

[sarussss]

Hi @rodrigovallades
I think you should listen to the init event first to make sure the slider has been created, then run the reInit function.
Hope it's of some help to you, because I didn't code React and don't understand the specific structure to be able to help you more.

emblaApi.on('init', () => {
  console.log('emblaApi  init')
  const engine = emblaApi.internalEngine()
  if (!engine.options.loop) emblaApi.reInit({ loop: true })
});

[davidjerleke]

@rodrigovallades I can't access your sandbox. Please provide a link that works:

[rodrigovallades]

I'm sorry @davidjerleke , the sandbox was private. Try again, please

https://codesandbox.io/p/sandbox/embla-carousel-generator-react-forked-l57274

[davidjerleke]

@rodrigovallades thanks. This is expected behaviour. What the docs say about reInit():

Hard reset the carousel after it has been initialized. This method allows for changing options and plugins after initializing a carousel.

Hard reset being the keywords. reInit() will stop any active animations and hard reset the carousel. So there's no promise from the Embla side that animations should be fluid when changing plugins and options. If you think this is unclear or vague, you're welcome to create a pull request and improve the docs.

With that said, you can achieve a fluid reInit in an unofficial way like so:

function reInitFluid() {
  const oldEngine = emblaApi.internalEngine();

  emblaApi.reInit();
  const newEngine = emblaApi.internalEngine();
  const copyEngineModules: (keyof EngineType)[] = ['location', 'target', 'scrollBody'];
  copyEngineModules.forEach(engineModule => {
    Object.assign(newEngine[engineModule], oldEngine[engineModule]);
  });

  newEngine.translate.to(oldEngine.location.get());
  const { index } = newEngine.scrollTarget.byDistance(0, false);
  newEngine.index.set(index);
  newEngine.animation.start();
}; 

But I can't support this feature officially. The problem with supporting a feature like that is that there's no way to write tests to cover all scenarios that can happen (think about the number of options, methods and events Embla has, and then think about the number of combinations possible). Because devs do all sorts of stuff that will break that, so I don't want to spend the little time I have answering a bunch of "false" bug reports where people claim the library is broken because it can't do magic to patch all their crazy cases.

Best,
David

[rodrigovallades]

Thanks for que quick response @davidjerleke .

I'm sorry for the false bug report. I misinterpreted the "hard reset" keywords.

I would have assumed it's not a bug if the carousel would have remained stationary ta the first item after being reinitialized. But since it just "jumped" to the second item, it felt like a bug.

This behavior of becoming "looped" only after the first interaction is similar to Netflix's carousel, btw.

I tried your solution. It kinda works if the first interaction with the carousel is "swipe" or "drag". But if the first interaction is a click on the "next" button, then there's a weird edge case where it doesn't work going BACKWARD from item 2 to 1. Going forward always works.

I'll try to sort it out. You can see it here, if you want.
https://codesandbox.io/p/sandbox/reinit-with-animation-fixed-forked-97y73y

Best,
Rodrigo