Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Chonky Menu Re-Creation

nathanmanousos.com

Post reply on HN
Print view View original

41–50 of 97 posts

Re: Chonky Menu Re-Creation

#41

Post by c-hendricks »

mark242 wrote: post #13

This is great -- all the way up to the point where you have to hold and drag. The usability on a laptop goes out the window as you realize you can't accelerate past the edge of your touchpad. Getting to the top item in the menu -- maybe even the most important item -- is extremely hard. You rapidly become limited to the number of items you can have in this menu. Tap-or-swipe-to-open, and tap-or-swipe-to-close have ra…

> The usability on a laptop goes out the window

On a non-Apple trackpad, I'm sure. Apple / macOS has had "3 finger drag" for a good few years now.

With it, there's no clicking involved: you put 3 fingers on your trackpad and move them and it's a drag operation. There's even a timeout / grace period before the drag is actually "committed".

You can also flick any one of your 3 fingers and it will drag + move your cursor with inertia.

And before they introduced 3 finger drag, there was always a timeout when doing tap + drag to account for running into the physical edge of your trackpad.

Having said all that, yeah I agree this isn't a great interaction on non-mobile devices.

Re: Chonky Menu Re-Creation

#43

Post by SamBam »

rmac wrote: post #35
trafnar wrote: post #28

(op here) Sorry this doesn't work on Android, I don't have any Android devices so I haven't tested it there, I think there are some differences in the way pointer events are handled that are messing it up. If it doesn't work for you, please have a look at the video where I demonstrate and talk through everything: https://www.youtube.com/watch?v=1VgrdLfDozo

I'm on Android Chrome 116 and I scrolled all the way to the bottom and wow that was a responsive component! Super fast and buttery smooth animation. I'm impressed

Android 13 Chrome 117 here and it did not work for me. Menu popped open on the long press, but moving my thumb up or down resulted in the whole page scrolling. Ditto on Firefox 117. (Is that weird that both my browsers are on the same version number?)

Re: Chonky Menu Re-Creation

#44

Post by trafnar »

rabbits_2002 wrote: post #42

runs at about 10 fps on my iPhone please dont ever add anything like this to a website

It runs pretty smooth on my iPhone, but yes, it is a prototype meant for education, not suitable for production use.

> So, I recklessly replaced all the elements of my menu that needed to animate with SpringLayers and just set the whole thing to re-render sixty times a second. I thought surely this would cause performance issues because I’d be re-calculating a spring value for each property of each animated layer each frame, but I never had an issue (on desktop at least), so given that this is a prototype, I just went with it.

Re: Chonky Menu Re-Creation

#45

Post by trafnar »

nyanpasu64 wrote: post #15

When you click on an item and move your cursor to the top or bottom of the visible bubble, the mouse instead selects the item next to it. I'd consider an item whose selection box is smaller than the visual outline to be a bug. It's also jarring to have items "running away" from the mouse cursor.

That doesn’t sound like how it’s supposed to work so maybe something is not rendering correctly, or I don’t understand what you are describing exactly.

Re: Chonky Menu Re-Creation

#46

Post by trafnar »

throwaway290 wrote: post #37

Demo runs at like 10 fps or less on this pretty new Apple laptop... And not doing anything heavy in the background either.

I’ve mostly not had issues on desktop, what browser are you using?

It was built in a fairly indecent way, but in my testing it always was responsive so I never optimized it, since it’s just meant as a learning tool.

Re: Chonky Menu Re-Creation

#47

Post by trafnar »

groggo wrote: post #7

nice! Did the original iOS version have to use similar math, or would that have been implemented with native iOS components? took a second to figure out that i had to hold the click.

I’m not sure as I haven’t communicated with the original author, but I think it requires a lot of the same custom work.

Re: Chonky Menu Re-Creation

#49

Post by trafnar »

38 wrote: post #36

Feature Policy: Skipping unsupported feature name “accelerometer”. chonky-menu Feature Policy: Skipping unsupported feature name “autoplay”. chonky-menu Feature Policy: Skipping unsupported feature name “clipboard-write”. chonky-menu Feature Policy: Skipping unsupported feature name “encrypted-media”. chonky-menu Feature Policy: Skipping unsupported feature name “gyroscope”. chonky-menu Feature Policy: Skipping unsup…

Is my demo trying to access all that stuff??

Re: Chonky Menu Re-Creation

#50

Post by CGamesPlay »

c-hendricks wrote: post #41
mark242 wrote: post #13

This is great -- all the way up to the point where you have to hold and drag. The usability on a laptop goes out the window as you realize you can't accelerate past the edge of your touchpad. Getting to the top item in the menu -- maybe even the most important item -- is extremely hard. You rapidly become limited to the number of items you can have in this menu. Tap-or-swipe-to-open, and tap-or-swipe-to-close have ra…

> The usability on a laptop goes out the window On a non-Apple trackpad, I'm sure. Apple / macOS has had "3 finger drag" for a good few years now. With it, there's no clicking involved: you put 3 fingers on your trackpad and move them and it's a drag operation. There's even a timeout / grace period before the drag is actually "committed". You can also flick any one of your 3 fingers and it will drag + move your curso…

Interesting, it's an accessibility feature that is not enabled by default. https://support.apple.com/en-us/HT204609
Post reply on HN