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

21–30 of 97 posts

Re: Chonky Menu Re-Creation

#22

Post by emmanueloga_ »

> I wasn’t sure what type of math function would work for this

Usually people use "easing functions", which are convenient since they typically have a range and image both in [0.0 .. 1.0] [1] (although sometimes the range is slightly above 1 or below 0 to produce some "effect"). CSS has a cubic-bezier function [2] that can be used to replicate pretty closely all sorts of easing functions.

Functions that look like an "S" when plotted are called "sigmoids", a popular one used in graphics applications is called "Smoothstep" [3].

--

1: https://easings.net

2: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...

3: https://en.wikipedia.org/wiki/Smoothstep

Re: Chonky Menu Re-Creation

#23

Post by spartanatreyu »

croes wrote: post #20
ccorcos wrote: post #2

Awesome tutorial demonstrating how to build really polished UIs in JavaScript — just requires a little know-how

And iOS as it seems not to work on Chrome on Android.

Looks like the author forgot to stop the page from scrolling while a user drags their finger on a canvas.

Re: Chonky Menu Re-Creation

#24

Post by trafnar »

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 original menu was built for mobile, where this isn't much of an issue, my re-creation is a bit weird because I primarily interact with it on desktop, but I followed the same ideas as the original.

For a desktop-specific version of this, I'd definitely allow it to persist open after a single click. Maybe I'll add that.

Re: Chonky Menu Re-Creation

#25

Post by trafnar »

emmanueloga_ wrote: post #22

> I wasn’t sure what type of math function would work for this Usually people use "easing functions", which are convenient since they typically have a range and image both in [0.0 .. 1.0] [1] (although sometimes the range is slightly above 1 or below 0 to produce some "effect"). CSS has a cubic-bezier function [2] that can be used to replicate pretty closely all sorts of easing functions. Functions that look like an…

Thanks, I briefly tried using an easing curve for this and somehow my brain wasn't playing along. I'll give it another look because, yeah, that does seem like the way to do it.

Re: Chonky Menu Re-Creation

#26

Post by trafnar »

zfxfr wrote: post #5

IMHO it seems to me overly complicated. Also it doesn't work on mobile / tablet Android. you can display the menu but once you release the button it dissapear

Ah sorry, I don't have any Android devices so I haven't tested it on that platform!

Re: Chonky Menu Re-Creation

#28

Post by trafnar »

(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

Post reply on HN