Menu from HTML: Animation

You can execute animation on opening an closing by adding class to the element.

import { menuFromHTML } from "@evermade/menu-toolkit";

const menuEl = document.querySelector('.js-main-menu');
if (menuEl) {
	const menu = menuFromHTML(
		menuEl,
		{
			action: 'hover',
			animateOpen: true, // class 'animate-open'
			animateClose: true, // class 'animate-close'
		}
	);
}

You can fine tune more settings and set max execution time untill animation is considered ready. This is also checked in animationend eventlistener but in case that doesn't run correctly, there is setTimeout backup.

import { menuFromHTML } from "@evermade/menu-toolkit";

const menuEl = document.querySelector('.js-main-menu');
if (menuEl) {
	const menu = menuFromHTML(
		menuEl,
		{
			action: 'hover',
			animateOpen: true,
			animateClose: true,
			animateOpenClass: 'slideUp';
			animateCloseClass: 'slideDown';
			animateOpenMaxExecutionTime: 500;
			animateCloseMaxExecutionTime: 250;
		}
	);
}