Animate NextJS image onLoad (when inView)

Question

I am trying to create a component for image that I can use across the site and then apply some animation whenever we see the image - and the image is loaded. I am using PrismicNextImage, but it should work exactly the same as next/image.

Problems with the code below: onLoad is triggered even if the image is outside of viewport. I think it should be loaded only when image enters the viewport and I don't need to implement some different logic to detect it. What's the best approach to use next images and be able to apply different animations to them (using gsap or framer-motion)? Thanks.

type AnimatedImageProps = {
  className?: string;
  field: object;
};

export default function AnimatedImage({
  className,
  field,
}: AnimatedImageProps) {
  function fadeIn(target: object) {
    gsap.to(target, {
      opacity: 1,
    });
  }

  return (
    <PrismicNextImage
      className={clsx(styles.image, className)}
      field={field}
      fallbackAlt=''
      width='1440'
      height='1800'
      onLoad={(e) => fadeIn(e.target)}
    />
  );
}