[Help]: Is their a way to run a function after the animation is finished

[michaelkremenetsky]

Summary

So I have a carousel that I control with the arrow keys and updates the query params in the URL on slide change using the nextJS replace function. Issue is that changing the query params causes a bit of stutter at the end of the animation. I fixed this when I was using nuka-carousel by using the afterSlide function but switched to embla-carousel as there were issues with that lib. Is there a way to run the function after the animation is done similar to afterSlide in nuka-carousel (https://commerce.nearform.com/open-source/nuka-carousel/api#afterslide)?

Snippet of how I am doing it currently:

  const { replace, asPath } = useRouter();
  const pathWithoutQuery = asPath.split("?")[0];

  const debouncedReplace = useRef(
    debounce((debouncedItems, endSlideIndex) => {
      replace(
        `${pathWithoutQuery}?item=` + debouncedItems[endSlideIndex]!.id,
        undefined,
        { shallow: true, scroll: false },
      );
    }, 500),
  );

  useEffect(() => {
    return () => {
      debouncedReplace.current.cancel();
    };
  }, []);

  const [emblaRef, emblaApi] = useEmblaCarousel({
    startIndex: initialIndex,
    containScroll: "keepSnaps",
    watchDrag: false,
    duration: fullscreen ? 0 : 25,
  });

  const slideChange = () => {
    const newIndex = emblaApi?.selectedScrollSnap();

    if (newIndex) {
      if (newIndex == newBufferedItems.length - 1) {
        fetchNextPage();
      }

      if (newBufferedItems[newIndex] != undefined) {
        markRead(newBufferedItems[newIndex]);
      }

      debouncedReplace.current(newBufferedItems, newIndex);
    }
  };

  useHotkeys("LeftArrow", () => {
    if (emblaApi) {
      emblaApi.scrollPrev();
      slideChange();
    }
  });
  useHotkeys("RightArrow", () => {
    if (emblaApi) {
      emblaApi?.scrollNext();
      slideChange();
    }
  });

output.webm

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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@michaelkremenetsky thanks for your question. Do you want your function to trigger after the animation ends or as soon as a new active slide has been selected?

[michaelkremenetsky]

Thanks for the extremely speedy response! I wanna do both in this case. I wanna change the query param after the animation ends as that's causing the stutter. But the fetchNextPage() and markRead() can run as soon as it's selected.

[davidjerleke]

@michaelkremenetsky I see. I think you're looking for these events:

• select
• settle

And here is an example of how to make use of these events in the docs. Remember to switch to the React tab for a relevant code example.

[michaelkremenetsky]

Thank you, settle worked! I had I tried select earlier but somehow missed settle.