Animations

Control enter and leave animations via the animation config passed to createContextMenu. You can also override timing with CSS variables.

Animation options

Types:

• fade — The menu fades in and out and scales slightly (opacity and scale).
• slide — The menu fades in and out and moves (opacity and translate).

Config example

createContextMenu({
  menu: [...],
  animation: {
    type: "slide",
    enter: 150,
    leave: 100,
  },
});

With explicit easing:

createContextMenu({
  menu: [...],
  animation: {
    enter: { duration: 150, easing: "ease-out" },
    leave: { duration: 80, easing: "ease-in" },
  },
});

Disable animations

createContextMenu({
  menu: [...],
  animation: { disabled: true },
});

CSS variables for timing

You can override animation timing in CSS. The library sets these on the menu root; override them to change timing without changing config.

Example:

.cm-menu {
  --cm-enter-duration: 150ms;
  --cm-leave-duration: 100ms;
  --cm-enter-easing: ease-out;
  --cm-leave-easing: ease-in;
}

You can change animation at runtime with menu.setOptions({ animation }). See API reference.