Using framer-motion and react-intersection-observer to fade in images on load and scroll

const bounceVariants: Variants = {
  offscreen: {
    y: 100,
    opacity: 0
  },
  onscreen: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      bounce: 0.3,
      duration: 1.0
    }
  }
};

const BounceInScroll = ({ children}) => (
  <motion.div
    initial="offscreen"
    whileInView="onscreen"
    viewport={{ once: true, amount: 0.4 }}  
    data-testid="bounceinscroll"
  >
    <motion.div variants={bounceVariants}>{children}</motion.div>
  </motion.div>
);

import { motion } from "framer-motion";

const FadeElement = ({ children, hasBeenLoaded, getIndex }) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: hasBeenLoaded ? 1 : 0 }}
      transition={{ duration: 0.2, delay: getIndex * 0.1 }}
      viewport={{ once: true }}
    >
      {children}
    </motion.div>
  );
};

export default FadeElement;

const Thumbnails = () => {
  const [loaded, setLoaded] = useState(false);
  return (
    <FadeElement hasBeenLoaded={loaded} getIndex={id}>
      <Image
        src={urlFor(mainImage).url()}
        alt="alt"
        layout="fill"
        loading="lazy"
        objectFit="cover"
        onLoadingComplete={() => setLoaded(true)}
      />
    </FadeElement>
  );
};

export default Thumbnails;