Trying to make an animation for my header logo in Squarespace. I'm using two gifs and a static image to make the animation. I'm almost getting it to work but it doesn't start right away when I hover on and off of the logo.

This is the script

<!--- Header logo animation --->
<script>
  
  $(function() {
    $(".header-title-logo").hover(
        function() {
            /* starting animation */
            var url = "url('https://static1.squarespace.com/static/5eb2a533deb05f200fce94ac/t/6242d5db8776ee2a68aefa31/1648547293662/one_loop.gif?time=" + new Date().getTime() + "')";
            $(this).css("background-image", url);
        },
        function() {
            /* ending animation */
            var url = "url('https://static1.squarespace.com/static/5eb2a533deb05f200fce94ac/t/6242d5cf5418df43b4c9e360/1648547281712/reverse.gif?time=" + new Date().getTime() + "')";
console.log(url);
            $(this).css("background-image", url );
        }                         
    );                  
});
</script>

This is the css

//\* Header Title & Logo animation \*/
.header-title-logo{
  background-image: url('https://static1.squarespace.com/static/5eb2a533deb05f200fce94ac/t/623dd1041339ae4479fe9715/1648218372746/ablogos2.png');
  background-size: cover;
  background-repeat:no-repeat;
  cursor:pointer;
}