gatsby-img and animation

[popeating]

In my project im making extensive use of GSAP to animate things (from page transitions to single piece on pages)
Now i have a page which is a list of recent works, every works got multiple images, at the moment im simply rendering the grid with the first image i got back from graphql and for this im using gatsby-img Img component;
my goal is to have the Img component fade (or transition some way) between the available images for the entry, at random (or at least at some intervals that looks random)

this is how i place my grid right now, with only the first image:

<div id="worklist" className="w-100 flex flex-grow flex-wrap mt-10">
        {currPort &&
          currPort.map((P, i) => {
            // console.log(P);

            return (
              <div key={i} className="w-full md:w-1/2 lg:w-1/3 p-5 ">
                {P.image && (
                  <Img
                    fluid={P.image[0].childImageSharp.fluid}
                    className="test"
                    style={{ height: '350px', width: '100%' }}
                    imgStyle={{ objectFit: 'cover' }}
                  />
                )}
               
              </div>
            );
          })}
      </div>

any idea on how i can implement this?

[Aereli]

The way i've used GSAP in the past is by referencing the items that are animated with a useRef hook and then calling them on componentDidMount or useEffect. There's a ton of examples on the GSAP Forums