Анимация с обратным действием

<!-- TS13 - Модификация для Тильды. Анимация с обратным действием https://mod.tistols.com/obratnaya-animatsiya -->
<canvas id="photoCanvas" width="470" height="470"></canvas>
<style>
#photoCanvas {
    border-radius:10px;
}
@media screen and (max-width: 480px) {
#photoCanvas {
width:120px;
height:120px;
}
}</style>

<!-- TS13 - Модификация для Тильды. Анимация с обратным действием https://mod.tistols.com/obratnaya-animatsiya -->
<script>
function createCanvasAnimation(canvasId, baseURL, photoCount) {
    const photoURLs = Array.from({ length: photoCount }, (_, i) => `${baseURL}${i + 1}.jpg`);
    const canvas = document.getElementById(canvasId);
    const context = canvas.getContext('2d');
    let currentPhotoIndex = 0;
    let intervalId = null;
    let isAnimating = false;
    let isAnimatingForward = true;
    let animationCompleted = false;

    function preloadImages(urls, callback) {
        let loadedImages = [];
        let imagesToLoad = urls.length;

        urls.forEach(function(url, index) {
            const img = new Image();
            img.src = url;
            img.onload = function() {
                loadedImages[index] = img; 
                imagesToLoad--;

                if (imagesToLoad === 0) {
                    callback(loadedImages);
                }
            };
        });
    }
    function displayPhoto(images, index) {
        const img = images[index];
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    }

    function startAnimationForward(images) {
        if (!isAnimating || !isAnimatingForward) {
            stopAnimation(); 
            isAnimating = true;
            isAnimatingForward = true; 
            animationCompleted = false; 

            intervalId = setInterval(function() {
                displayPhoto(images, currentPhotoIndex);
                currentPhotoIndex = (currentPhotoIndex + 1) % images.length;

                if (currentPhotoIndex === images.length - 1) {
                    stopAnimation();
                    animationCompleted = true; 
                }
            }, 24);
        }
    }

    function startAnimationBackward(images) {
        if (!isAnimating || isAnimatingForward) {
            stopAnimation();
            isAnimating = true;
            isAnimatingForward = false; 

            intervalId = setInterval(function() {
                displayPhoto(images, currentPhotoIndex);
                currentPhotoIndex = (currentPhotoIndex - 1 + images.length) % images.length;

                if (currentPhotoIndex === 0) {
                    stopAnimation();
                }
            }, 24);
        }
    }

    function stopAnimation() {
        clearInterval(intervalId);
        intervalId = null;
        isAnimating = false;
    }

    preloadImages(photoURLs, function(loadedImages) {
        displayPhoto(loadedImages, currentPhotoIndex);

        canvas.addEventListener('mouseenter', function() {
            if (!isAnimating || !isAnimatingForward) {
                startAnimationForward(loadedImages);
            }
        });

        canvas.addEventListener('mouseleave', function() {
            if (animationCompleted || isAnimatingForward) {
                startAnimationBackward(loadedImages);
            }
        });
    });
}

// Здесь заменяем название элемента, адрес к картинкам и количество кадров
createCanvasAnimation('photoCanvas', 'https://raw.githubusercontent.com/tistols/naushniki/main/', 40);
createCanvasAnimation('photoCanvasOne', 'https://raw.githubusercontent.com/tistols/vr1/main/', 40);
</script>