Question:
is there a way to consistently get gifs/webps to play at the right time when being shown?
Product:
I am using the standard Wix editor and Velo
What are you trying to achieve:
I have been trying to make a reactive animation that plays whenever the user scrolls on the page, and to that end I have 2 webps that can be played in sequence- one for idle time, and one for the actual animation. However, since wix loads gifs and webps in advance, when I try to show one and hide the other by scrolling, the webp appears playing at a random time, as it was loaded in mid-loop.
What have you already tried:
I tried to correct this by reassigning the source of the image every time I load it, but that caused a slight delay where the webp wouldn’t be loaded yet even as it was shown. Then I tried to implement a loop where the webp would be constantly reloaded until it is shown, and that seems to work sometimes, but inconsistently. The image would appear at the right time, and load in properly, but the webp would sometimes be playing mid loop even though it should have been reset.
Additional information:
Here is a relevant snippet of code from the latest attempt:
layer1 = 0;
$w.onReady(function () {
setInterval(()=> {animate1();}, 10)
}
);
//skipping irrelevant stuff....
if (recent[0] != recent[1] && layer1 == 0) {
console.log(recent[0]);
layer1 = 1;
setTimeout(() => {layer1 = 0}, 2700); //animation is 2700 ms long
}
}
function animate1(){
if (layer1 == 1) {
$w('#GrassLayer1Anim').show();
$w('#GrassLayer1Idle').hide();
}
else {
$w('#GrassLayer1Idle').show();
$w('#GrassLayer1Anim').hide();
$w('#GrassLayer1Anim').src = '(image png url (could technically be anything but I thought a static png of the image would be good incase the animation didn't play))';
$w('#GrassLayer1Anim').src = '(image webp url)';
}
}