I'm quite new to this

Ask the community
,
1

Okay so I’m trying to achieve a fade out code, which basically means I want text to appear on screen, then after an allotted time, say 8 seconds, I want it to fade out so that new text can replace it. I’m not sure about how to do this, has anybody managed to achieve this within the Wix custom coding? (I’m quite a bad coder, in advance)

2

You may try this. (I always test the code I write before posting here :slight_smile:

$w.onReady(function () {
$w(‘#text’).text = ‘Hello Wix’;

let fadeOptions = { 
	"duration":   2000, 
	"delay":     4000 // <––– Adjust the time to 8000 or anytime to your liking 
}; 

$w('#text').hide('fade', fadeOptions) 
	.then(()=> { 
		fadeOptions.delay = 0; 
		$w('#text').text = 'You are AWESOME!'; 
		setTimeout(()=>{	// <––– This is to make sure the text change is done before showing 
			$w('#text').show('fade', fadeOptions); 
		},300); 
	});

});

And if you want to above to show continuously, you may need to put it in a loop.

Hope that helps and happy coding :slight_smile:

3

Really awesome stuff, I’m having a small problem though, when the second line of text appears, it begins to fade in, then flickers away and begins the fade-in a second time, do you know as to why this could possibly be?

$w('#text38').text = 'Sample text as reference for fade out'; 

let fadeOptions = { 
	"duration":   1250, 
	"delay":     3000  
}; 

$w('#text38').hide('fade', fadeOptions) 
	.then(()=> { 
		fadeOptions.delay = 0; 
		$w('#text38').text = 'Second sample text as reference for fade out'; 
		setTimeout(()=>{	// <––– This is to make sure the text change is done before showing 
			$w('#text38').show('fade', fadeOptions); 
		},300); 
	});

});

What I think may be the problem is that the setTimeout parameter isn’t working as intended, I believe it times out the animation after it’s already begun to then start. Any suggestions? Thanks for the awesome work though!

4

setTimeout should work. setTimeout fires the callback only after it times out.
Here is the screen grab for you to take a look.

https://vimeo.com/267125890

To further problem shoot, I will need to see the code on the entire page.

P.S.: I am not part of Wix. I am just a random dude trying to pitch in and help the community. If my reply is late, it’s not Wix but me doing something else. But I will try to make this work for you. :slight_smile:

Happy coding!