Text element.html: how to add transition duration?

Ask the community
,
1

Hi,
I have 3 boxes with mouseIn / mouseOut functions that shows/hides another boxes and make some text to be blurred (via converting text element to HTML and apply CSS styling.

I managed to make the boxes show/hide faded with duration, but I also want to somehow make the CSS styling also with duration.

This is my code for mouseIn:

let fadeOptions = {
 "duration":   250
};

export function box11_mouseIn(event) {
    $w('#secondPharse').html = "<h1 style='text-align: right;'><span style='text-shadow: 0 0 10px white; color:                               transparent; font-size: 38px;  '>" + $w('#secondPharse').text + "</span></h1>"
    $w('#thirdPharse').html = "<h1 style='text-align: right;'><span style='text-shadow: 0 0 10px white; color: transparent; font-size: 38px;  '>" + $w('#thirdPharse').text + "</span></h1>"
    $w('#left1box').show("fade", fadeOptions);
    $w('#umbrella1Up').hide();
    $w('#umbrella1Left').show();
}

and this is how it looks:

As you can see, the text boxes on the left had duration for show() and hide(), but the text blurring doesn’t have a duration.

Can I figure it out somehow?

Thanks!

2

Maybe you can fake it with several setTimeout() .
Set each of them to 100ms and show texts with different blurring levels to create an effect of gradual blurring.

3

Nice idea.
I’ll give it a try.