I have a gallery website and I want to add a slight delay before the images load on the grid. Also the delay should be increased with each image, so for example the first image loads in 0.2 seconds, the next one in 0.4 seconds and so on. I’m using framer motion to achieve this effect and while it kind of works when I load the page, the problem comes when I resize the window. If I resize the window, the images start loading again and if I am too far down the page, it takes a while for the images at the bottom to load, since the delay gets longer with every image.

This is my implementation on the effect:

GalleryImage component:

export default function GalleryImage({ props, index }) {
  const [loading, setLoading] = useState(true);

  return (
    <motion.div
      initial={{opacity: 0, translateY: 100, scale: .9}}
      animate={{opacity: 1, translateY: 0, scale: 1}}
      transition={{delay: index / 50, duration: .5, ease: "easeInOut"}}  <-- delay based on index
    >
      <Image
        src={props.url}
        alt="Gallery Image"
        width={props.width}
        height={props.height}
        loading="lazy"
        onLoad={() => setLoading(false)}
        className="w-full cursor-pointer transition-all hover:brightness-75"
      />
    </motion.div>
  );
}

Gallery component (I’m also using a custom masonry library for the layout, maybe that could be the issue?):

export default function Gallery({ images }) {
  return (
    <ResponsiveMasonry
      columnsCountBreakPoints={{600: 1, 768: 2, 1024: 3, 1536: 4, 2048: 5}}
      className="mx-16"
    >
      <Masonry gutter=".25rem">
        {images.map((image, i) => (
          <GalleryImage key={i} props={image} index={i} />
        ))}
      </Masonry>
    </ResponsiveMasonry>
  )
}

I’m looking for a fix or a workaround, maybe I missed something. I heard of staggerChildren in framer motion but couldn’t find a lot of documentation on it. I would appreciate some help.