@keithengg did you ever find out a solution?

I've never done this effect, but I have a hacky suggestion. I've once used anopacity: 0 carousel in the background that would capture drag information. Then in the foreground had markup that controlled a non standard looking carousel (it was a wheel of content), and passed position data between the two, but it was a lot of effort as it required hooking into the internal engine.

@davidjerleke. I am also stuck on this issue.

@keithengg Did you find a solution?

When scrolling I want the center image to grow in width smoothly. Changing the flex: 0 0 value; breaks the carousel

@keithengg,@Joobs,@tayteboss — adjusting slide sizes while the carousel is animating will reset the carousel. This kind of change isn't supported while the carousel is animating, as any ongoing animation will be interrupted and the carousel will reset. A workaround could be to usetransform: scale instead. It may or may not work for your use case.

However, you candisable the internal resize logic (which triggers the reset) and implement your own instead. That way, you have full control over when the resize should be triggered—allowing you to avoid it when slide sizes change during transitions:

const[emblaRef,emblaApi]=useEmblaCarousel({watchResize:false,})

Just keep in mind that the internal resize logic callsemblaApi.reInit() when sizes change, which is good to know if you're writing your own resize handling.