Smoothen text transitions

Ask the community
,
1

Hey guys! I’ve coded my text to change words at set intervals. Is there way to make these changes fade in a bit more smoothly?
I have no coding experience, sorry:(

1842×290 38.1 KB

2

Hello melwynrajan10,

perhaps you could first hide your text…

$w('#text25').hide('fade')

Then do your —> setInterval-change

And then after the change you could “Fade-In” the text again.

$w('#text25').show('fade')
3

Thank you for your reply!
I am confused to where I should add it, this is what I’ve done so far:

1866×314 42.2 KB

4

@melwynrajan10

Hello again,

well first at all, please use CODE-TAGS. Pics are a bad idea.
Nobody can copy code from a pic. I am to lazy to write all the code xDDDDD.
I am waiting for normal CODE in code-tags.

Then i will help you further :grin:

5

@russian-dima

Sure! Sorry for the late reply, I have been extremely busy and sick.
Here’s what I have so far, it’s messy sorry.

Any ideas as to what I should change?

const myArray = ["peace", "kind", "mercy", "good", "love"];
let index = 0;
$w.onReady(function () {
    setInterval(function () { $w('#text25').text = 'Jesus is ' + myArray[index++ % myArray.length]; }, 3000);
    $w('#text25').show('fade')
});
6

@melwynrajan10

Take a look at this example here…

https://russian-dima.wixsite.com/meinewebsite/test-1

I just modified the code a little bit…

var i = 0 
var myTimerValue = 3000
var myArray = ["fast", "expensive", "useful", "a womanizer", "super-fast", "economic", "a monster"]
let myVar = setInterval(myFunction, myTimerValue);

$w.onReady(function () { })

export function BTNplay_click(event) {$w('#BTNstop').enable(), myVar = setInterval(myFunction, myTimerValue);}
export function BTNstop_click(event) {$w('#text1').hide('fade'); $w('#BTNstop').disable(), stopFunction(), setTimeout(()=>{myVar},100)}

function myFunction() {
    $w('#text1').hide()
    $w('#text1').show('fade')
    $w('#BTNstop').enable()
 if (myArray[i]===undefined) { i = 0,
     $w('#text1').text="END", stopFunction(), console.log("Function stopped")
     setTimeout(()=>{myVar = setInterval(myFunction, myTimerValue)},2000)

    }
 else {
 return $w('#text1').text=myArray[i], i = i+1} $w('#BTNstop').disable()}
 
function stopFunction() {clearInterval(myVar);}