Replacing a text element html color more slowly

Ask the community
,
1

Hi,

I want to replace the color of an html element as the user scrolls down the page. Right now the code looks like this:
let Str1 = $w(‘#chocolateText1’).html;
let Str2 = $w(‘#chocolateText2’).html;
let Str3 = $w(‘#chocolateText3’).html;
let newStr1 = Str1.replace(/#F3F5F7/i, ‘#000000’);
let newStr2 = Str2.replace(/#F3F5F7/i, ‘#000000’);
let newStr3 = Str3.replace(/#F3F5F7/i, ‘#000000’);
$w(‘#chocolateText1’).html = newStr1;
$w(‘#chocolateText2’).html = newStr2;
$w(‘#chocolateText3’).html = newStr3;

The code replaces the html color very nicely; however, it does it instantaneously, not smoothly. Is there any way to smooth or maybe fade the process? I want the text visible all the time (so simply using the fade in animation doesn’t exactly fit what I want to do). Any ideas?

Thanks,
Anney

2

Hello Anney,

Using this method can get a bit messy. I would recommend adding 2 texts, one for each color, then showing and hiding them using fadeIn and fadeOut. The difference is with these two animations we can customize the effects of it (speed, duration, ie).

You can read more about those two animations here.

Goodluck!