[FEATURE] Animation between option items

[heymartinadams]

The animation is lovely. It just needs to be a bit faster, a bit snappier, especially for command menus that have a longer list of items. Is there any way we can set it ourselves?

Current animation:

CleanShot.2024-01-23.at.10.21.03.mp4

Example of snappier animation: (Linear)

CleanShot.2024-01-23.at.10.23.10.mp4

[haaarshsingh]

Interesting why it overlaps the menu items when it's going down? I'll take a look.

[haaarshsingh]

@heymartinadams do you prefer the select animation by yourself?

[heymartinadams]

I wonder if the animation could either be made faster, or perhaps turned off?

On an aside — not related to this issue: another reason my example looks a bit glitchy is because I have added custom colors, and they seem to take a bit to load, right as the animation shifts. See here for a still frame:

[haaarshsingh]

@heymartinadams I'm working on an API rewrite for the colors right now. I think it's much easier for people to just customize the colors themselves in a CSS file as opposed to passing them into the menu.

[heymartinadams]

💯 agreed. That’s what we’re doing.

[haaarshsingh]

Awesome! Has using the colors in CSS as opposed to passing them onto the menu fixed this issue?
I'll still work on something which gives an optino to turn off the animation, so someone can even pass it in if they have like prefers-reduced-motion or something.

[heymartinadams]

Modified style like this, for example.

<style>{`
.category_header { height: 1rem; margin: 0.8rem 0.5rem 0.4rem; font-weight: 500; font-size: 0.75rem; }
.command {
  color: ${!appDarkMode ? 'rgb(var(--colors-primary))' : 'rgb(var(--colors-primary-dark))'} !important;
}
.command, .selected { height: 2.4rem; margin: 0; border-radius: 0.25rem; }
`}</style>

[haaarshsingh]

Yeah, you won't have to worry about doing weird stuff like this once the new update comes out. Some big things comin' your way.