Menu Animation CSS

For the custom menu animation on hover, choose “Fade Slide Up” for the submenu and add the following CSS. The linear animation easing curve can be adjusted here: https://codepen.io/jh3y/pen/MWdrGGj

:root {
  --sub-menu-transition-translate-speed: 0.32s;
  --sub-menu-transition-opacity-speed: 0.26s;
  --custom-ease: linear(
    0 0%, 0.1935 4.37%, 0.3671 8.83%,
    0.521 13.38%, 0.6557 18.04%,
    0.7716 22.82%, 0.869 27.73%,
    0.9488 32.81%, 1.0111 38.08%,
    1.0512 42.81%, 1.0792 47.75%,
    1.0953 52.97%, 1.1 58.55%,
    1.0956 63.36%, 1.0838 68.73%,
    1.0119 90.98%, 1.0029 95.69%, 1 100%
    );
}

:where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"] :where(.gb-sub-menu) {
  opacity: 0;
  transform: translateY(20px) scale(1) !important;
  transform-origin: center;
  transition:
    transform var(--sub-menu-transition-translate-speed) var(--custom-ease),
    opacity var(--sub-menu-transition-opacity-speed),
    display var(--sub-menu-transition-translate-speed) allow-discrete;
}

:where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"]
  :where(.gb-menu--hover) :where(.menu-item:hover) > :where(.gb-sub-menu),
:where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"]
  :where(.gb-sub-menu--open) > :where(.gb-sub-menu) {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
}

@starting-style {
  :where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"]
    :where(.gb-menu--hover) :where(.menu-item:hover) > :where(.gb-sub-menu),
  :where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"]
    :where(.gb-sub-menu--open) > :where(.gb-sub-menu),
  :where(.gb-navigation[data-gb-sub-menu-transition])[data-gb-sub-menu-transition="fade-slide-up"]
    :where(.gb-sub-menu) {
    opacity: 0;
    transform: translateY(20px) scale(1) !important;
  }
}

.gb-menu a, .gb-menu .menu-item{
  transition: color 0.2s ease, background-color 0.2s ease;
}

:where(.gb-sub-menu) {
  will-change: opacity, transform;
}