Animate Img from 'gatsby-image' with GSAP

[artrn-nt]

Hi,

I need some tips on how to animate a Gatsby Img element using GSAP.

In fact I managed to animate it in Firefox, Opera, Chrome, but when it comes to Safari it's not working and I get this:

To make it work I proceed like this in the return of my functional component using ref (useRef hook):

Then in my useEffect I access the img tag with the imageRef object of the Gatsby Img element:

Is it the good way of doing it? Why it's not working in Safari but it's ok in the other browsers? weird...

Arthur

[artrn-nt]

Found a solution: instead of animating the img tag in Gatsby Img I targeted the gatsby div img wrapper and then animated it.