Need Help with Animated Hero

Hello. I'm working on a Squarespace website that tries to mimic A24's gif carousel (https://a24films.com/) with multiple headings and their respective animated gifs. When the user hover over one of the headings, its corresponding gif starts playing.

I managed to make the gif stop when the mouse goes outside of the headings box, however I couldn't nail making the gif stop playing once the user hovers over another heading. I'd like the gif to keep playing indefinitely UNTIL the user hovers over a different heading or presses the arrow. I understand this is achieved by replacing the gif with another image, but couldn't get it to work like I want it to.

I can provide my JS and rest of the code if you need it.

Thanks in advance!

Link to my website is: https://steerforward.com/home-thomas

I think you figured it out? It looks playing to me

10 hours ago, tuanphan said:

I think you figured it out? It looks playing to me

Right, it plays, but it doesn't start over once I go to another link. The A24 website gifs stop and start playing from scratch every time you go to hover over the respective heading.