Gif animation to start when "in-view" class exists

I added this code to my wordpress website so i can start the gif image animation when the dynamically added class "in-view" exists of the gif image parent element. But the gif animation doesn't work when the class "in-view" exists. Can anyone help? Many thanks.

https://minerva.thinkcreative.studio/what-we-do/research-development-innovation/

I added this code but it doesn't work:

    /* Start gif animation when in "in-view" class exists */    document.addEventListener("DOMContentLoaded", function() {    const gifs = document.querySelectorAll(".gif");    function startAnimation(gifImg) {    const gifSrc = gifImg.dataset.src;    gifImg.src = gifSrc;    }    function handleMutation(mutationsList) {    for (const mutation of mutationsList) {    if (mutation.type === "attributes" && mutation.attributeName === "class") {    const target = mutation.target;    if (target.classList.contains("in-view")) {    const gifImg = target.querySelector("img[data-src]");    if (gifImg) {    startAnimation(gifImg);    }    }    }    }    }    const observer = new MutationObserver(handleMutation);    gifs.forEach(gif => {    observer.observe(gif, { attributes: true });    });    });