Fade in and fade out of different bits of text in a loop

Ask the community
, ,
1

Dear smart people of Wix Studios,

I am trying to have different pieces of text, in the same spot, fade in and out at a specific time–in a loop. Like hidden text elements that become visible after a specific amount of time, not triggered by anything. No scroll, no click or whatever. I found this website that uses that effect: https://hometownduo.eu/

Anyone who can guide me into the right direction? I can’t find anything. Maybe I am using the wrong buzzwords, but yeah no luck so far and I have no idea where to start. :frowning:

Thanks a lot <3

2

Hello @Sarah_Ballach,

I see you posted on Wix Forum for the First Time. Welcome to the Wix Studio Forum.

You can use Velo Code to make this “Fade” animation. show() and hide() would help you with custom options as shown in the image.

Please refer

https://dev.wix.com/docs/velo/api-reference/$w/image/show
https://dev.wix.com/docs/velo/api-reference/$w/image/hide

image
image488×308 16.4 KB

3

Hi, Sarah_Ballach !!

Is it the text animation located at the bottom left of the site? :thinking:


$w.onReady(function () {

    const fadeTextLoop = createFadeTextLoop(
        "yourTextElemId",
        [
            "text1!!",
            "text2!!",
            "text3!!"
        ]);

    fadeTextLoop();

});

function createFadeTextLoop(textElemId, texts, waitTime = 1000) {

    let currentIndex = 0;

    function fadeTextLoop() {
        $w(`#${textElemId}`).hide("fade").then(() => {
            currentIndex = (currentIndex + 1) % texts.length;
            $w(`#${textElemId}`).text = texts[currentIndex];
            $w(`#${textElemId}`).show("fade").then(() => {
                setTimeout(fadeTextLoop, waitTime);
            });
        });
    }

    return fadeTextLoop;

}