Live data from Hacker News

Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

codepen.io

21–30 of 80 posts

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#22
post #9

Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.

A slider that doesn't slide when swiping on touch devices also is.

Yep, I tried sliding this slider 3 times and gave up. Had to come to the comments to figure out how to work it.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#23

Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.

Seriously? I agree it needs to respond faster, but this is impressive and cool. Start with a compliment, you'll go a lot further in life.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#24
post #23

Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.

Seriously? I agree it needs to respond faster, but this is impressive and cool. Start with a compliment, you'll go a lot further in life.

I see nothing wrong with constructive criticism.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#25

Earlier quoted context omitted.

Why would you try drag it? Maybe I'm used to iOS I don't swipe those things I just touch them...

Why wouldn't you? It looks like a slider toggle, not a checkbox.

what is a "slider toggle"? sliders should be used for ranges of values. checkbox for toggling values.

we could argue it's unfortunate that iOS(?) decided to start making their "checkboxes" look a little like sliders, but they still only toggle values thus you don't slide them.

in any case, i get where you're coming from. using mousedown instead of click or up maybe kind of solves both use cases?

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#26
post #7

Nice. Trying to drag the button doesn't work though; I would add that.

Why would you try drag it? Maybe I'm used to iOS I don't swipe those things I just touch them...

I don't see a button, it has a background that suggests it'll slide when dragged.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#27
post #7

Nice. Trying to drag the button doesn't work though; I would add that.

Why would you try drag it? Maybe I'm used to iOS I don't swipe those things I just touch them...

I don't see a button, it has a background that suggests it'll slide when dragged.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#28

Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.

Now that we're at it: clickable things have the "hand" cursor.

All of the widget is actionable yet the cursor is not always pointy.

It's one of my pet peeves.

That being said, the animation is beautifully done and the widget very cute. This is just eye-candy.

Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis

#29

Awesome transitions! One minor annoyance is toggles is meant to respond instantly, and when I click it just accelerates tad slow as to make you think it's a bit lagged. Looks very cool, though.

You can change the line var toggleTl = new TimelineMax({paused:true}).timeScale(2);

to read eg var toggleTl = new TimelineMax({paused:true}).timeScale(5);

instead. (I'm not the author, just fiddling)

Post reply on HN