Increase Animation Delay?

With help of syntax from Wix Code, and using default animation-INs for natively animated elements via the gui, is it possible to manipulate the show-delay factor to an amount over the maximum possible delay of 4 seconds via GUI?

Hi Omid,

You can set a delay for the animation with code, but can’t set the duration.

For delay, here’s a way… lets say the animation is hidden (maybe just put the basic image underneath it) and is called ‘#image1’.
Example for 5 seconds:

$w.onReady(function() {
    const millisecondsToDelay = 5000;
    setTimeout(() => {
        $w('image1').show();
    }, millisecondsToDelay)
});

Liran.

@Liran,

This works awesome, thanks for sharing.

So I’m a bit stuck on how to effectively get this to “reset” such that it fires more than once? I’m using this within a menu to animate the members of the menu. The problem I’m running into is that the “animation” piece only fires the first “_click” and then doesn’t fire again.

I’m assuming one has to “clear/reset” the const if you want it to run again? Here’s my code, can I request an assist? :slight_smile:

export function hamburgerMenu_click() {
	const millisecondsToDelay1 = 0;
	const millisecondsToDelay2 = 125;
	const millisecondsToDelay3 = 250;
	const millisecondsToDelay4 = 375;
	//$w("#closeMainMenu").show("FlipIn");
	//$w("#mainMenuLabel").show("Reveal");
	//$w("#hamburgerMenu").hide();
	//$w("#navigationLabel").hide();
	$w("#mainMenu").show();
	setTimeout(() => { $w("#homeMenuIcon").show("ExpandIn"); },
		millisecondsToDelay1); 
	setTimeout(() => { $w("#companyMenuIcon").show("ExpandIn"); },
		millisecondsToDelay2);
	setTimeout(() => { $w("#solutionMenuIcon").show("ExpandIn"); },
		millisecondsToDelay3);
	setTimeout(() => { $w("#storeMenuIcon").show("ExpandIn"); },
		millisecondsToDelay4);
}

This works perfectly on the first click, but then subsequent clicks the only code that seems to get called is the:

$w("#mainMenu").show

Thank you!

  • Parker.

@Larin,

Disregard!

I realized that I was forgetting to .hide the element afterwards. Doh! Once rehidden, then the animation runs again perfectly, including delay. My updated code:

export function hamburgerMenu_click() {
	$w("#closeMainMenu").show("FlipIn");
	$w("#hamburgerMenu").hide();
	$w("#mainMenu").show();
	setTimeout(() =>
		{ $w("#homeMenuIcon").show("ExpandIn"); }, 0);
	setTimeout(() =>
		{ $w("#companyMenuIcon").show("ExpandIn"); }, 125);
	setTimeout(() =>
		{ $w("#solutionMenuIcon").show("ExpandIn"); }, 250);
	setTimeout(() =>
		{ $w("#storeMenuIcon").show("ExpandIn"); }, 375);
}

export function closeMainMenu_click() {
	$w("#mainMenu").hide();
	$w("#homeMenuIcon").hide();
	$w("#companyMenuIcon").hide();
	$w("#solutionMenuIcon").hide();
	$w("#storeMenuIcon").hide();
	$w("#closeMainMenu").hide();
	$w("#hamburgerMenu").show("FadeIn");
}

Fun fun!

  • Parker.

I want an image to be invisible when the page loads and then become visible after 20 seconds. Is this possible?

Michael. I’ve never tried anything as long as 20 seconds, but it seems feasible. In my code above you’ll want to use this:

export function hamburgerMenu_click() {
setTimeout(() =>
{ $w(“#homeMenuIcon”).show(“ExpandIn”); }, 20000);
}

You can replace “hamburgerMenu_click” with whatever makes sense to you, and #homeMenuIcon should be replaced with the name of the object on the Wix page. I used “ExpandIn” in for the animation, but there’s multiple items available.

I input 20000 milliseconds for the timeout variable, which is 20 seconds.

Hope this helps!

I think I found an approach that works. I went into the Properties panel for the image and there’s a setting to Hide on page load. Then in the code for the page I put this:

Set the image to be “hidden on load” (in the Properties panel) then use this code to reveal it after X seconds:

$w.onReady(function() {
const millisecondsToDelay = 20000;
setTimeout(() => {
$w(‘#image1’).show();
}, millisecondsToDelay)
});

But I’ll keep your code just in case my approach doesn’t work. Thanks so much!

thanks!

I’ve been using the method above and it works. However, I’d like the image to show more gradually. Putting a millisecond value in the parenthesis after .show should accomplish this, but it’s not working for me. I also tried adding a fade in animation to the image, but it only works in preview mode, not in the published site.

Any ideas?