Wix Studio Hamburger Menu Animations

Ask the community
1

The default blank template has a nice animated menu attached. I deleted it. I added a new hamburger menu, but I am unable to figure out how to animate it. The same controls that were available in Editor X do not appear to be available.

2

Have you got a link to the template that was used?

3

The menu buttons have no animation.
You can easily create your own button using the editor and animation bar on the side. If you need help show the example you are interested in and I will explain how

4

Can we animate a burger menu into an “X”? I have a burger menu which leads to a megamenu. But I had to design a different icon to allow closing such menu.

5

Just the basic Blank template when creating a new site.

6

I’m referring to the slide out hamburger menu. When implementing a new one from the assets, we do not have the animation controls that we previously had in EditorX.

I ended up just creating my own using js in the dev panel, but it would be nice to see those animation options return, as that would be a quicker option for designers.

7

You can, but you have to create your own code and use the dev panel.

8

I don’t understand what is happening with the Hamburger menu in Wix Studio. I have worked on three sites now. First one, the hamburger menu wasn’t animating, and the animation settings that were in Editor X are gone. So, I made my own menu system with js.

On the next site some time later, I dropped the hamburger menu in, and it had it’s own slide out animation. No settings, but it was nice, so I left it alone.

On the current site, the hamburger menu has no animation, no settings to edit.

I don’t understand what is happening. Perhaps, I’m overlooking something? Settings tucked away somewhere?

I shouldn’t have to script animation for something so basic on small projects… it should just work. Like it did in Editor X. Give it a default animation, and/or let me simply choose the animation type like any other object on the menu container…

Please let me know if I am overlooking something somewhere, because I don’t see it.

9

I have exactly the same issue / experience. I’m not seeing what I’m missing. I don’t understand these basic features we know from Editor X are all of a sudden gone and no where to be found.

@fresh_imp : can you share something on how you made a simple menu system animation with JS. I’m working on one too but so far I’m not getting it very smooth.

Nevertheless I follow your reasoning: for small projects we shouldn’t be losing time on JS customization for something basic…

1 Like
10

Yeah, for sure.

So, I define the attributes for the animation, this is specific to the show and hide functions:

let openNavigation = {
	delay: 200,
	direction: "right",
	duration: 500
}

let closeNavigation = {
	delay: 0,
	direction: "right",
	duration: 400
}

let fadeIn = {
	delay: 0,
	opacity: 1,
	duration: 500
}

let fadeOut = {
	delay: 0,
	opacity: 0,
	duration: 400
}

And then create functions to call those animations


function openNavigation() {
	$w('#background').show(fadeIn);
 	$w('#navigationPanel').show("roll", openNavigation);
}

function closeNavigation() {
   	$w('#background').hide("roll", closeNavigation);
	$w('#navigationPanel').hide(fadeOut);
}

Then add the onClicks()

$w.onReady(function () {
    //Hamburger button
	$w('#hamburger').onClick(() => {
		//open navigation
    	openNavigation();
    });
	//Navigation close button
	$w('#navclosebtn').onClick(() => {
		closeNavigation();
	})
    //Background Click
	$w('#background').onClick(() => {
		//open navigation
    	closeNavigation();
    });
});

This is very basic. You could step it up and add a boolean to track the state (open/close), and you could create Timeline() style animations too. Though, this is quick, easy, and efficient.

Also note: For whatever reason, it does not appear we can interact with the default hamburger menu button and panel. You will need to make your own objects. Which becomes difficult to manage, because you have to keep hiding these overlay layers, and then unhiding them to build the project.

I am hoping the Wix team will fix the hamburger menu issue soon. We shouldn’t have to be creating this. We should have a hamburger menu system that is bug-free and somewhat customizable. I’m sure they’re working on it, but communicating that would be amazing, Because it’s been at least 8 months, and nothing has changed.