[Help]: Reducing Delay After Drag on Embla Carousel Auto Scroll

[MarkForLoop]

I’m using the Embla Carousel auto scroll plugin and here’s how I’ve implemented the key areas

const OPTIONS: EmblaOptionsType = { loop: true, dragFree: true }

  const [emblaRef, emblaApi] = useEmblaCarousel(options, [
    AutoScroll({
      playOnInit: true,
      speed: 1,
      stopOnInteraction: false,
      startDelay: 0,
      stopOnFocusIn: false
    })
  ])

The issue I’m encountering happens when I drag the carousel while it's scrolling. After dragging, it scrolls to the intended position but then pauses for a few seconds before resuming.

Is there any way to reduce or eliminate this delay after dragging?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

CodeSandbox

[davidjerleke]

@MarkForLoop please read what the settle event says about dragFree here. This is what's causing the pause you mention because you've already set startDelay to 0. You can manually emit the settle event like so:

emblaApi.emit('settle');

...and fool the AutoScroll plugin that it should start before the carousel has actually settled but I would advice against it. And I haven't tested if it will cause bugs.

[MarkForLoop]

Sorry english isn't the best at times.

so I comment out the
startDelay and put in emblaApi.emit('settle'); under the useEmblaCarousel hook
is that what your saying?

Edit:
I tried what you say but it hasn't worked

[MarkForLoop]

2024-09-10.11-49-37.mp4

[davidjerleke]

@MarkForLoop you should run your code on pointerUp. See this CodeSandbox.

[MarkForLoop]

Thank you @davidjerleke