Reviews shown on screen for set interval and transition off the screen

Ask the community
,
1

Hello there lovely people of the Velo forum!

I have a small and what I thought to be a straightforward task but I am having a bit of trouble!

In a nutshell, what I was wanting to achieve is the following:
The user of the site scrolls down and as the text box appears on screen, this initiates the cycling through the list of reviews automatically, each review is on screen for 10 seconds and then the next one is shown! I think the code below is achieving that (unless I am mistaken?)

What I would like to do now is have each review slide onto the screen, stay there for 20 seconds and then slide off the screen!

Any help would be greatly appreciated!

$w.onReady(function () {

})

const myArray = ["Review1", "Review2", "Review3", "Review4"];

export function textField_viewportEnter(event) {

    let index = 0;

    setInterval(function () {
        $w('#textField').hide('slide')
        $w('#textField').text = myArray[index++ % myArray.length];
        $w('#textField').show('slide');
    }, 20000);

}
2

I’m not that good at animating, but see if this works for you:

$w.onReady(function () {
  const myArray = ["Review1", "Review2", "Review3", "Review4"]

  let index = 0
  let random = myArray[index++ % myArray.length]
  $w("#textField").text = random

  setInterval(async function () {
    await $w("#textField").show("slide", { duration: 500 })
    $w("#textField")
      .hide("slide", { delay: 19800, duration: 500 })
      .then(() => {
        random = myArray[index++ % myArray.length]
        $w("#textField").text = random
      })
  }, 20000)
})