Need help delaying a strip animation!

Ask the community
,
1

Hi everyone, I used the WIX three-column strip template to animate three numbers that count up from 0 to the target number (see image below). I followed a YouTube video that showed me how to create the source code and it works great (see code below the image). The problem is that the animated strip is the third strip down on my page so when you scroll down to it, the animation has already played. The source code I used has no delay function and I don’t know what that code would look like or where to insert it into my existing code. If someone could re-create the code with the delay function built in so that the strip animation only animates when you scroll to that strip I sure would appreciate it. The code is below. Thanks in advance for your help!

1920×1076 199 KB

$w.onReady( function () {
var i = 1
var dato1 = 28305;

var i2 = 1;
var dato2 = 94042;

var i3 = 1;
var dato3 = 5652;

var cuenta = setInterval(contador1, 70);
var cuenta2 = setInterval(contador2, 70);
var cuenta3 = setInterval(contador3, 70);

if (i === dato1) {
clearInterval(contador1);
}

function contador1() //columna 1
{
if (i <= dato1) {
$w(“#text16”).text = (i.toString());
i++;
i = Math.round(i * 1.5);
} else {
$w(“#text16”).text = (dato1.toString());
}
}

function contador2() //columna 2
{
if (i2 <= dato2) {
$w(“#text17”).text = (i2.toString());
i2++;
i2 = Math.round(i2 * 1.5);
} else {
$w(“#text17”).text = (dato2.toString());
}
}

function contador3() //columna 3
{
if (i3 < dato3) {
$w(“#text18”).text = (i3.toString());
i3++;
i3 = Math.round(i3 * 1.5);
} else {
$w(“#text18”).text = (dato3.toString());
}
}

});

2

If it is in a strip then you can simply set it to run when the strip enters the viewport.
https://www.wix.com/corvid/reference/$w.ViewportMixin.html

You can also delay it using effect options, however that would still need to be kicked into gear when the strip appears.
https://www.wix.com/corvid/reference/$w.EffectOptions.html

3

It’s no coincidence that I received assistance from “givemeawhiskey.” Love it. Thank you for the tip. Can you tell me where I would place this code within the existing code I have already created? See below.

$w.onReady( function () {
var i = 1
var dato1 = 28305;

var i2 = 1;
var dato2 = 94042;

var i3 = 1;
var dato3 = 5652;

var cuenta = setInterval(contador1, 70);
var cuenta2 = setInterval(contador2, 70);
var cuenta3 = setInterval(contador3, 70);

if (i === dato1) {
clearInterval(contador1);
}

function contador1() //columna 1
{
if (i <= dato1) {
$w(“#text16”).text = (i.toString());
i++;
i = Math.round(i * 1.5);
} else {
$w(“#text16”).text = (dato1.toString());
}
}

function contador2() //columna 2
{
if (i2 <= dato2) {
$w(“#text17”).text = (i2.toString());
i2++;
i2 = Math.round(i2 * 1.5);
} else {
$w(“#text17”).text = (dato2.toString());
}
}

function contador3() //columna 3
{
if (i3 < dato3) {
$w(“#text18”).text = (i3.toString());
i3++;
i3 = Math.round(i3 * 1.5);
} else {
$w(“#text18”).text = (dato3.toString());
}
}

});

4

Just put your event handler above your current code and after the page onReady function, so that when the onViewport runs for your strip for example, then it runs the code that you already have.

export function yourStrip_onViewportEnter(event) {

If you use the onViewport event handler through the properties panel for the strip

$w("#yourStrip").onViewportEnter( (event) => {

If you use the onViewport event function inside of your code itself and so not need to add the event handler through the properties panel.

See here for more info.
Velo: Reacting to User Actions Using Events | Help Center | Wix.com