Autoplay Animation on Carousel

[jade reef]

I am trying to recreate this design of this carousel when the slide is passed which makes a fade effect https://mavenbuilt.com/ however when I try to implement it with the Transition component it dismounts the whole component and makes it hide every time it passes a slide. How could it be implemented in an easy way?

const CarouselImages = () => {
  const autoplay = useRef(Autoplay({ delay: 6000 }));
  const [opened, setOpened] = useState(false);
  const [emblaApiRef, setEmblaApiRef] = useState(null);

  useAnimationOffsetEffect(emblaApiRef, 6000);

  const handleSlideChange = (index) => {
    console.log(`Slide changed to ${index}`);
    setOpened(true);
    setTimeout(() => setOpened(false), 600);
  };

  return (
    <>
      <Carousel
        withIndicators
        loop
        className="carousel-component"
        plugins={[autoplay.current]}
        getEmblaApi={setEmblaApiRef}
        id="carousel-home"
        onSlideChange={handleSlideChange}
      >
        {images.map((item) => (
          <Carousel.Slide key={item.image + "carousel slide image"}>
            <Transition
              mounted={opened}
              transition="fade"
              duration={600}
              timingFunction="ease"
              key={item.image + "carousel slide image"}
            >
              {(transitionStyle) => (
                <div style={{ ...transitionStyle }}>
                  <img
                    src={item.image}
                    alt="image carousel"
                    className="image-carousel"
                  />
                  <div className="caption">
                    <span>{item.title}</span>
                    <p>{item.caption}</p>
                    <Link className="button-carousel">LEARN MORE</Link>
                  </div>
                </div>
              )}
            </Transition>
          </Carousel.Slide>
        ))}
      </Carousel>
    </>
  );
};

Autoplay Animation on Carousel

Autoplay Animation on Carousel

[last elbow]

Could you create a reproduction of what you've got so far?

[jade reef]

const CarouselImages = () => {
  const [opened, setOpened] = useState(true);
  const [emblaApiRef, setEmblaApiRef] = useState(null);

  useAnimationOffsetEffect(emblaApiRef, 1500);

  const handleSlideChange = (index) => {
    setOpened(false);
    setTimeout(() => setOpened(true), 1500);
  };

  const smoothScaleFade = {
    in: {
      opacity: 1,
      transform: 'scale(1)',
    },
    out: {
      opacity: 0.95,
      transform: 'scale(1.1)',
    },
    common: {
      transformOrigin: 'center',
    },
    transitionProperty: 'transform, opacity',
    transitionDuration: '1500ms',
    transitionTimingFunction: 'ease-out',
  };

  return (
    <>
      <Carousel
        withIndicators
        loop
        className="carousel-component"
        // plugins={[autoplay.current]}
        getEmblaApi={setEmblaApiRef}
        onSlideChange={handleSlideChange}
      >
        {images.map((item) => (
          <Carousel.Slide key={item.image + "carousel slide image"}>
            <Transition
              mounted={opened}
              transition={smoothScaleFade}
              duration={1500}
              timingFunction="ease-out"
              key={item.image + "carousel slide image"}
            >
              {(transitionStyle) => (
                <div className="slide-container">
                  <img
                    src={item.image}
                    alt="image carousel"
                    className="image-carousel"
                    style={{ ...transitionStyle }}
                  />
                  <div className={`caption ${opened ? 'caption-slide-up' : 'caption-slide-down'}`} >
                    <span>{item.title}</span>
                    <p>{item.caption}</p>
                    <Link className="button-carousel">LEARN MORE</Link>
                  </div>
                </div>
              )}
            </Transition>
          </Carousel.Slide>
        ))}
      </Carousel>
    </>
  );
};

export default CarouselImages;