[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