Fading in and out 2 images is not completely smooth on fadeout

Ask the community
,
1

Question:
Hi. I have this piece of code I use to fade in and out 2 images (in this case my name in English and gujarati). This was working perfectly in my previous published site, however now you can see there’s almost a double fade in/out of each image so it’s not smooth. This is strange because the home page is the same as before and the code runs perfectly in preview mode.
Here is my website and it is the ‘Home’ page: www.shanillakhlani.com

Here is the code block

import wixEvents from 'wix-events';

$w.onReady(function () {
    // When the page has loaded, show image2 and hide image1
    $w('#image2').show();
    $w('#image1').hide();

    // Function to toggle the images' visibility with fading effect
    function toggleImages() {
        // Check which image is currently visible and fade it out
        const image1Visible = $w('#image1').isVisible;
        const imageToFadeOut = image1Visible ? '#image1' : '#image2';
        const imageToFadeIn = image1Visible ? '#image2' : '#image1';

        // Fade out the current visible image
        $w(imageToFadeOut).hide('fade')
            .then(() => {
                // After the fadeOut animation is completed, fade in the other image immediately
                return $w(imageToFadeIn).show('fade');
            });
    }

    // Start the fading loop after 4 seconds (showing image2)
    setTimeout(function () {
        // Call the toggleImages function to start the fading loop
        toggleImages();
        // Set an interval to repeat the fading loop every 8 seconds
        setInterval(toggleImages, 3500);
    }, 800);
});

What are you trying to achieve:
A smooth fade in and out of 2 images on the home page of my website

What have you already tried:
Adjusting time of fade out. Trying different browsers. Created new home pages. Clearing cache. Different laptop.

Many thanks for any help,
Shanil

2

Anyone can help with this?