Increase Animation Delay?

Ask the community
,
1

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?

2

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.

3

@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.
4

@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.
5

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

6

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!

7

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!

8

thanks!

9

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?