How can I add a fade when the image is changed?

Question

This is an image that changes every 5 seconds, but I think it's distracting, because it doesn't have any fade. How can I make it so that there is a short transition time like you can do in CSS?

import React, { useEffect, useState } from "react";

import aa from '../imgs/aa.JPG'
import aa2 from '../imgs/aa2.JPG'
import aa3 from '../imgs/aa3.JPG'
import aa4 from '../imgs/aa4.JPG'
import gg from '../imgs/gg.jpeg'
import gg2 from '../imgs/gg2.jpeg'
import gg3 from '../imgs/gg3.jpeg'
import gg4 from '../imgs/gg4.jpeg'


import './AnimatedGalery.css'

const images = [aa, aa2, aa3, aa4, gg, gg2, gg3, gg4];


export default function () {

    let [currentIndex, setCurrentIndex] = useState(0);

    useEffect(() => {
        const intervalId = setInterval(() => {
            if(currentIndex == images.length - 1) {
                setCurrentIndex(currentIndex = 0);
            } 
            else {
                 setCurrentIndex(currentIndex = currentIndex + 1);
            }
        }, 5000)
        
        return () => clearInterval(intervalId);
    }, [])

    return (
        <div>
            <img src={images[currentIndex]} />
        </div>
    )
}

Answer 1

Have a look at React Spring https://aleclarson.github.io/react-spring/v9/

Here is a quick sandbox showing a demo of what it sounds like you're after. https://codesandbox.io/s/affectionate-nightingale-r7yjm?file=/src/App.tsx

Essentially, React Spring's useTransition hook will play spring-based animations when the data provided to the hook changes.

import { animated, useTransition } from "@react-spring/web";
import * as React from "react";

const imageUrls = [
  "https://images.unsplash.com/photo-1462396240927-52058a6a84ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=966&q=80",
  "https://images.unsplash.com/photo-1495314736024-fa5e4b37b979?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1352&q=80",
  "https://images.unsplash.com/photo-1612004687343-617e7c8f68d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
];

export default function App() {
  const [index, setIndex] = React.useState(0);
  const [imageUrl, setImageUrl] = React.useState(imageUrls[index]);
  React.useEffect(() => {
    const timeoutId = window.setTimeout(() => {
      setIndex((s) => {
        let newIndex = 0;
        if (s < imageUrls.length - 1) newIndex = s + 1;
        setImageUrl(imageUrls[newIndex]);
        return newIndex;
      });
    }, 2500);

    return () => clearTimeout(timeoutId);
  }, [index]);
  const transition = useTransition(imageUrl, {
    from: { opacity: 0, transform: "translateY(-1rem) scale(0.75)" },
    enter: { opacity: 1, transform: "translateY(-0rem) scale(1)" },
    leave: { opacity: 0, transform: "translateY(1rem) scale(1.25)" }
  });
  const fragment = transition((style, item) => (
    <animated.div style={{ ...style, position: "absolute" }}>
      <img
        src={item}
        alt=""
        style={{ width: 200, height: 200, objectFit: "cover" }}
      />
    </animated.div>
  ));
  return (
    <div
      style={{
        display: "flex",
        width: "100vw",
        height: "100vh",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      {fragment}
    </div>
  );
}