15 ms·
Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
- zichy 10y agoNow try to use a valid checkbox input.
- kuschkufan 10y agoThat's left as an exercise for the inclined hn reader.
- itchynosedev 10y agoAwesome 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.
- retSava 10y agoYou 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)
- remy_luisant 10y agoThat's adorable. I wonder how using such a toggle could change the user behavior. I had a bit of a hard time turning the face into a sad face. I really liked it much better at green. It would be easier to convince me to pay money with this toggle. Then again, I'm a sucker for happy faces and cute things, so maybe I'm just weak to this kind of thing.
- Grangar 10y agoI already see it happening. In 5 years emotional-manipulation-driven design is going to be the next hot thing.
- andai 10y agoWhen you buy a recording of one of Louis C.K.'s shows from his website, you are given the choice (*) Yes, I'd like to receive further emails about louis C. K. things. ( ) No, leave me alone forever you fat bastard.
- manuelflara 10y agoThis reminds me of Chuzzle[1], a cute puzzle game by PopCap (makers of Zuma, Pebble, Plants vs Zombies etc) that, when you tried to quit the game, it'd show you one of the furry creatures with googly eyes, asking you if you really wanted to quit[2]. I thought it was a nice touch at the time (maybe 10 years ago). [1] https://www.youtube.com/watch?v=V3LJ9n43M-4 https://www.youtube.com/watch?v=V3LJ9n43M-4 [2] http://www.mobygames.com/images/shots/l/112433-chuzzle-deluxe-windows-screenshot-exit-screen.jpg http://www.mobygames.com/images/shots/l/112433-chuzzle-delux...
- s_kilk 10y agoDoom had a similar trick, the "Quit: Yes/No" prompt would say something like "I wouldn't quit if I were you, work is much worse".
- wattengard 10y agoYeah. They do that. When you try to quit Bookworm Adventures the bookworm cries "Don't leave me!"...
- gpvos 10y ago...and when you select No, does the background fade to black, with crackling lightning and rolling thunder?
- talmand 10y agoFive years? It's already happening. There's a large number of "shaming" dark patterns out there already. "No, I don't wish to save money.", as an example.
- sdrothrock 10y ago
- HalfwayToDice 10y agoClick 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.
- clishem 10y agoA slider that doesn't slide when swiping on touch devices also is.
- jessriedel 10y agoYep, I tried sliding this slider 3 times and gave up. Had to come to the comments to figure out how to work it.
- Already__Taken 10y agoIt handles a double-click nicely though so credit for that.
- cpfohl 10y agoSeriously? 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.
- oneZergArmy 10y agoI see nothing wrong with constructive criticism.
- ominous 10y ago> I agree it needs to respond faster, but this is impressive and cool. You did the same thing. Nothing wrong with being objective.
- kolme 10y agoNow 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.
- gpvos 10y agoNice. Trying to drag the button doesn't work though; I would add that.
- philliphaydon 10y agoWhy would you try drag it? Maybe I'm used to iOS I don't swipe those things I just touch them...
- falsedan 10y agoWhy wouldn't you? It looks like a slider toggle, not a checkbox.
- catshirt 10y agowhat 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?
- extra88 10y ago"Checkboxes" that look like little sliders usually are good UI because they avoid this confusion, "is the control showing me the current state or the option to change to the desired state?" For whatever reason, toggle switches like this better convey that they're displaying the current state before you touch them.
- OJFord 10y agoPeople do though, I often watch (and cringe as) my parents do it.
- falsedan 10y agoThe slide is so big on this one that it looks like multiple targets. The iOS ones are small enough that the only useful interaction is to mash with fingertip. mousedown++ but also touch events
- laurent123456 10y agoLooks like HN strips off emojis from titles and comments.
- andai 10y agoOn front page it's just <->
- fagnerbrack 10y agoOk, that's really funny xD
- fagnerbrack 10y agoYou just found out an emoji HN forgot to remove in the title xD I just wonder how long it's gonna last.
- sangupta 10y agoCute!
- Klathmon 10y agoCan I use this under any kind of OSS license? I'm not the most familiar with codepen so I apologise if it's on there somewhere already.
- ballenf 10y agohttps://blog.codepen.io/legal/licensing/ https://blog.codepen.io/legal/licensing/ Public pens are MIT licensed.
- chrisgannon 10y agoNo I don't grant permission sorry. I put stuff out to show off my skills and to help people learn.
- Klathmon 10y agoWell as another here has pointed out this is licensed under the MIT license on codepen and explicitly for this at [0] then click "license" below the pen [0] http://codepen.io/chrisgannon/details/WpjXVr http://codepen.io/chrisgannon/details/WpjXVr
- chrisgannon 10y agoI'm just saying as the original designer/artist I don't give permission, regardless of the MIT license (which I disagree with on CodePen but that's another story).
- Klathmon 10y agoI get that from a "ethics" standpoint (and I won't be using it in our project like I wanted), but legally you are giving permission for anyone to use the software in any way they see fit within the MIT license. It doesn't matter what you say here, the license is kind of final for the code it's referencing. IIRC CodePen does allow you to license your code differently, but it requires a "pro" account.
- baby 10y agoAfter flat UI, cute UI? I love this. Btw this is a joke, but how far from reality is it? In Japan there is definitely a cute UI. I could even say that the Nintendo Switch UI is a cute UI.
- ainiriand 10y agoQuite, but not yet.
- jlink 10y agohaha nice one!
- dagenleg 10y agoNice! Slow, unresponsive "cute" visual element. Perfect for modern web-developers.
- deleted 10y ago[deleted]
- yev 10y agoNice work, looks really great!
- yev 10y agoThe same author: http://codepen.io/chrisgannon/pen/VjWWZO http://codepen.io/chrisgannon/pen/VjWWZO Looks pretty great too!
- szatkus 10y agoAnd now I want to learn SVG.
- talmand 10y agoYou should, working with SVG is interesting. It makes you think differently in how to handle UI design. I wish it were better supported across the board in browsers, it would help solve a great deal of UI issues.
- 1niels 10y agoAny suggestions of how to get started? It's been a topic I have long been interested in but never found a good path to follow.
- szatkus 10y agoI've just started, but this looks like a nice tutorial: http://tutorials.jenkov.com/svg/index.html http://tutorials.jenkov.com/svg/index.html Also if you use Atom you should install this package: https://atom.io/packages/svg-preview https://atom.io/packages/svg-preview Overall it's quite simple especially if you have experience with HTML and Canvas. Much easier for me than Inkspace.
- talmand 10y agoIt really kind of depends on what you want to do with the SVGs. They can cover topics such as icons, animations, UI, charts, reports, and so on. Just about anything you can imagine using a vector image instead of a raster applies. Many javascript libraries already exist to cover many of the usual situations. You can look into those and play with them to figure out where your interests lie. And this isn't limited to web technologies and browsers.
- chasingtheflow 10y agoReally cool. Changing the timeScale value on JS line 33 to 1 slows everything down and makes the animation a little easier to see if you're interested in seeing how the effect works.
- iheredia 10y agoThe author has a lot of interesting pens http://codepen.io/chrisgannon/pens/popular/ http://codepen.io/chrisgannon/pens/popular/
- graiz 10y agoThis should really be an <input type="checkbox"> with bonus CSS/JS so that it's backward compatible and doesn't break the world of accessibility, tabs, focus, forms, etc. I think it's fine for design to explore visual representations of an input but the HTML should try to stay clean.
- ino 10y agoI don't like the switch design for people using a mouse. What is the behaviour? Should I click the switch? Where do I click it: where it is or where I want it to go? Or should I drag it? And usually only one of those actions work and I seem to always miss toggling it on the first try.
- berry_sortoro 10y agoGreat but why is my mouse only a pointer over the smiley but not over the entire then when I in fact can click the entire thing to make it work.