[Help]: Autoplay starts from zero on hover out when stopOnMouseEnter and stopOnInteraction are used.

[todor0v]

Summary

I'm using Embla Carousel with a combination of stopOnMouseEnter and stopOnInteraction. This causes an undesired behavior. Specifically, when you hover out, instead of the animation continuing from where it left off, it resets to zero. For example, you have to wait another four seconds for the next slide to appear, rather than skipping the time that already passed before you hovered. I'm using a progress bar that tracks the time until the next slide, which makes this issue very noticeable.

This is how I am tracking the progress and play/pause my custom progress bar:

const [emblaRef, emblaApi] = useEmblaCarousel(
   {
      loop: true,
      axis: 'y',
   },
   [
      Autoplay({
	   delay: 4000,
	   stopOnMouseEnter: true,
	   stopOnFocusIn: true,
	   stopOnInteraction: false,
      }),
      Fade(),
   ]
)
const { selectedIndex, scrollSnaps, onThumbnailClick } =useThumbnail(emblaApi)
const [progressKey, setProgressKey] = useState(0)
const [isPlaying, setIsPlaying] = useState(true)

useEffect(() => {
   if (emblaApi) emblaApi.rootNode().classList.remove('opacity-0')
}, [emblaApi])

useEffect(() => {
   setProgressKey((prev) => prev + 1)
}, [selectedIndex])

useEffect(() => {
   if (!emblaApi) return

   // Event handler for autoplay pause
   const handleAutoplayPause = () => {
      setIsPlaying(false)
   }

   // Event handler for autoplay play
   const handleAutoplayPlay = () => {
	setIsPlaying(true)
   }

   // Attach event listeners
   emblaApi.on('autoplay:stop', handleAutoplayPause)
   emblaApi.on('autoplay:play', handleAutoplayPlay)

   // Clean up event listeners on unmount
   return () => {
	emblaApi.off('autoplay:stop', handleAutoplayPause)
	emblaApi.off('autoplay:play', handleAutoplayPlay)
   }
}, [emblaApi])

Please let me know if you believe that I am doing something wrong. Thank you!

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

No response

[davidjerleke]

@todor0v have you seen the new progress bar I've added to the autoplay example in the docs? With recent changes, it's now easy to build a progress bar that doesn't get out of sync. See this:

• Autoplay example

[reintroducing]

@davidjerleke I'm actually running up against this as well. i forked your example and you can clearly see this illustrated when hovering over the container after progress has been started: https://codesandbox.io/p/sandbox/embla-carousel-autoplay-react-forked-hykq8v?file=%2Fsrc%2Fjs%2FEmblaCarousel.tsx

Is there a way to resume the progress bar from where it left off after pause that syncs with the actual progress which should also resume and not restart?

[davidjerleke]

@reintroducing thanks for your question. There's a feature request for this so no, not at the time of writing:

• [Feat]: Autoplay - Add pause autoplay method #1021

[reintroducing]

@davidjerleke ah, thats unfortunate, but thank you for the quick reply. the library is fantastic and made it extremely easy for me to set up a pretty intricate carousel in a matter of about two hours with full functionality, really appreciate your effort on this.

is there by any chance a timeline on when that feature will get implemented? i know this is OSS and so i don't want to push too hard, but just curious how far down the rabbit hole i should go trying to build something out myself versus this being available. our designers are really stuck on this being a "feature".

[davidjerleke]

Is there any chance you have a timeline for when this feature might be implemented?

@reintroducing unfortunately, not at the moment. I’m currently focused on SSR support (#1095), which is quite a big task, so I can't say when I’ll be able to shift gears and look into other feature requests just yet.

Our designers are really stuck on this being a "feature".

I know the feeling 😅! This feature definitely has a good priority, but it's not the top one at the moment.

[reintroducing]

@davidjerleke understood, appreciate it regardless, keep up the great work.

[davidjerleke]

There's a feature request for this now and it has been added to the roadmap:

• [Feat]: Autoplay - Add pause autoplay method #1021
• [Feat]: ⭐ Roadmap #841