22 ms·
My favourite animation trick: exponential smoothing (2023)
- bartread 3y agoI like this although I'm going to stick my neck out and say the author is objectively wrong that sqrt is better than cubic for a toggle switch, and that cubic is in fact the better choice for this situation simply because of the way real life toggle switches generally work. Think about the breaker switches on the electrical consumer unit on your house, or the kind of switches you often find on analog synths or other audio gear, generally stuff that's going for a particular aesthetic. I have a small Hughes & Kettner guitar amp that has two of these switches that are very satisfying to use[0]. When you use these kinds of switches in real life there's some initial resistance, and then they suddenly snap into the new position because of the way they're spring loaded. This is more closely modelled by the cubic function than it is by either the sqrt or the exponential smoothing function. Other than that absolute nitpick, I really enjoyed the piece. It well illustrates how animation can enhance a user experience when done well (with, for example, an appropriate easing function) or alternatively detract from it and be quite jarring if not implemented thoughtfully (thinking particularly of the linear interpolation examples). [0] This does somewhat depend on the type of toggle switch, although even the variety that you find on something like a Minimoog (this isn't some sort of gear flex, by the way - I don't own one of these!) exhibit this "resist then snap to the new position" behaviour that makes them so enjoyable to flick.
- asimpletune 3y agoIntuitively I too preferred the feel of the cubic function. A mechanical toggle will have some inertia, and I guess that’s what we’re seeing with the cubic approach.
- notpushkin 3y agoI think the crucial difference is that in real life the toggle starts moving when you start applying force, and snaps at some point. In UI, you've already felt the click on your mouse, so personally I'd expect the UI toggle to snap right away.
- exe34 3y agoHave you tried using a tick box?
- Biganon 3y agoThey don't serve the same purpose. A toggle switch has an immediate result, such as switching the website between light mode and dark mode. A checkbox is part of a form, and indicates a boolean choice that will only be taken into account once you submit the form.
- exe34 3y agoHow do you enter text then? Do you re-implement the text box because input text is part of a form? Check boxes work just fine without a form btw: https://stackoverflow.com/a/50012963 https://stackoverflow.com/a/50012963
- Biganon 3y agoI'm not saying you CANNOT use a checkbox outside of a form. I'm saying they gradually became different UX widgets that serve different purposes. You can use pretty much any widget to store a boolean state. A select? It works. Radio buttons? Works. Checkbox? Of course. Typing "1" or "0" in a text input limited to integers between 0 and 1 inclusive? Why not. But semantics matter, and so does the principle of least surprise. Nowadays users expect an immediate result when toggling a toggle button. Not as much when they toggle a checkbox.
- exe34 3y agoNo, users put up with whatever is thrown their way. Glitchy menus, pages that take forever to load, unresponsive timelines, you name it. I don't think a check box would be as controversial as you believe.
- sodimel 3y agoEmotional design (https://en.wikipedia.org/wiki/Emotional_Design https://en.wikipedia.org/wiki/Emotional_Design) as it's finest form, there's a lot to tell behind a tiny little animation.
- t43562 3y agoI think this was fun but I really hate those switch things - I find it confusing to know which position is on and which is off. Which colour is the "on" colour? A checkbox might be ugly but I do understand it at a glance.
- timvisee 3y agoI don't like this kind of smoothing at all. It feels slow to me. Please just toggle without animations instead. And yes, I know these examples have been slowed down.
- Traubenfuchs 3y agoAn I the only one upset this is done by (excessive) JS usage? It would be my deepest displeasure to bring a button toggle animation to production that requires more than CSS. Quick example I found: https://hudecz.medium.com/how-to-create-a-pure-css-toggle-button-2fcc955a8984 https://hudecz.medium.com/how-to-create-a-pure-css-toggle-bu... Easing/Smoothing is possible with transition-timing-function. https://www.w3schools.com/cssref/css3_pr_transition-timing-function.php#:~:text=Definition%20and%20Usage,change%20speed%20over%20its%20duration https://www.w3schools.com/cssref/css3_pr_transition-timing-f....
- tiborsaas 3y agoButtons are just examples because it's easy to understand. The point of the article is the math. Of course CSS could do it with less JS, but this would have been a totally different post.
- meehai 3y agoLinear is perfect.
- whitehexagon 3y agohmm, could be my old FF (or hidpi) but many of the examples just dont work. Jittery scrolling on the landscape, and circles that start teleporting back and forth on the sliders, and one that vanishes to the left. To me that just highlights another reason to keep it simple... checkbox?
- d--b 3y agoI wonder if there is some cultural preference for this. Looking at the map example, I find the cubic smoothing way “calmer”. The exponential one feels a bit hectic and I am wondering if it’s an American thing. It’s got a “wheez” quality that is annoying to me, but that reminds me of hyper cartoons like powerpuff girls. It’s still all very subtle…
- hellweaver666 3y agoI appreciate the effort that goes into animation like this, but I always have to wonder, especially in the context of the web if it's worth all of the additional code and development time for such a minor detail. Do our users even notice?
- Klaster_1 3y agoDuring my day job as a frontend developer, I have to cope with this quite often. When you raise a point with the manager that we could be fixing real bugs instead re-doing a non-essential, very subjective thing the designer came up with, they usually reply that they trust the designer as a professional and they know better - the developers don't have a choice.
- useless999 3y agoAuthor writes about useful easing concept, happens to use UI element purely for illustrative purposes, HN comment section turns into a 100+ comment jihad over animations in GUIs. Nothing substantial is discussed.
- jdiff 3y agoSo many people allergic to design and equating bad design with all design. Studies? Experts? What could they know? These guys have opinions on modern software and designers to throw under the bus for them.
- interloxia 3y agoI can't down vote this so I'll reply to say that there is still value to be found amongst the noise and complaints, even in this thead. I found iainmerrick's comment insightful and worthy. A place to discuss the value of animations is of value some of time too. There are lots of other threads to participate in.
- baxuz 3y agoThis is actually a really good approach and a good proof of concept for an animation / easing technique. Reminds me a lot of Flickity: https://metafizzy.co/blog/initial-demos/ https://metafizzy.co/blog/initial-demos/ https://metafizzy.co/blog/math-time-resting-position/ https://metafizzy.co/blog/math-time-resting-position/ https://metafizzy.co/blog/particle-to-slider/ https://metafizzy.co/blog/particle-to-slider/ https://metafizzy.co/blog/flickity-begins/ https://metafizzy.co/blog/flickity-begins/ Especially this demo: https://codepen.io/desandro/pen/myXdej https://codepen.io/desandro/pen/myXdej This technique isn't just useful for switches. Nor will you use a <canvas> element for a switch. Nor will you have 20 parallel requestAnimationFrame loops running on the entire site. Or intentionally broken elements. The site also doesn't have optimizations where the rendering stops once the delta is too small — or probably dozens more of small tweaks that could make this production ready. The comments here show that people either haven't read the article and are making assumptions, or can't see the forest for the trees. Or are just simply so biased and cynical that they need to share their (unprofessional) opinion in order to appear smart. Since when has HN turned into Reddit?
- verisimi 3y agoThe cynicism doesn't seem that fair in this case. Re HN becoming like Reddit.. Perhaps there is a generic 'cynical feeling' in the air with technology, with feelings of distrust about the intentions of governments and corporations over their use of the profound technology that is appearing, and how this is being constructed with the intention to constrain and manage the individual, rather than enabling greater freedom.
- cmplxconjugate 3y agoI think maybe more that the users of this website, which is designed in a way that is intensely functional compared to other similar sites, just prefer less “useless” design features.
- actualwitch 3y ago> Since when has HN turned into Reddit? That has been happening for a while, but people are not talking about it because it's explicitly against hn guidelines. Gee, I wonder why.
- m_st 3y agoIn relation to the formulas near the end of the article, I find it tragic that even in 2024 they are still PNG images.
- ano-ther 3y agoIt’s funny how emotional discussions about UI choices are. I liked the article and its demonstrations because I learnt something. Personally, I switch off animations whenever possible, preferring snappy action over flashy effects. But they have their use, for example in the rubber band effect which would be quite jarring without motion smoothing.
- jonplackett 3y agoI’m pretty much fine with the linear one
- mdw 3y agoThe animations are unfortunately broken on Mobile Safari :(
- KolenCh 3y agoFrom the title I somehow expected Planck taper window which comes up in partition of unity. The property of this is that you won’t find any discontinuity in any degree of derivatives. Ie it is smooth in the mathematical sense. If you want to make changes from a constant function (such as not moving at all) to something else (start moving), then this smoothness is a nice property.
- SSchick 3y agoThe animations are becoming.. violently choppy/vibrating over time and then my browser crashes, bad algorithm?
- YellowSuB 3y agoYeh got the same problem on firefox, had to kill it.
- seanalltogether 3y agoThis takes me back to old days of Flash programming and the infamous Robert Penner easing functions. http://robertpenner.com/easing/penner_easing_as1.txt http://robertpenner.com/easing/penner_easing_as1.txt
- chews 3y agoGlad someone mentioned the Penner functions, that was a godsend in my early flash days.
- burning_hamster 3y ago> Yes I’ve made a whole procedural map generator & renderer just for this example, and I have zero regrets. You can be salty about excessive use of animations in modern UI all day long, but you have to respect that level of commitment.
- scld 3y agoSo this is why my computers feel the same as they did 25 years ago.
- rthnbgrredf 3y agoI think it comes down to personal preference. I prefer instant and snappy interfaces with as minimal latency as possible. Please provide me with an option to disable all animations and I'm likely fine with your interface.
- iainmerrick 3y agoI don't see much discussion here of the crucial point, which is that this isn't just another easing curve or smoothstep() between 0 and 1, it's a stateless method that handles pretty much any inputs in a regular way. That's really useful! If you've used CSS transitions you'll have encountered the problem this solves. Okay, my duration is 400ms -- but why 400? Shouldn't it depend on how far it has to move? As others have noted, exponential smoothing has a different problem, that it asymptotically approaches but never quite reaches its destination. The obvious fix is to stop animating when the step gets below some threshold, but that's inelegant. When using a similar method for inertial scrolling, I've found it useful to add a (pseudo-)friction term. This offsets the exponential, and effectively works as a minimum speed. Here it is in Desmos: https://www.desmos.com/calculator/98ufbuzxhj https://www.desmos.com/calculator/98ufbuzxhj
- deleted 3y ago[deleted]
- rav 3y ago> If you've used CSS transitions you'll have encountered the problem this solves. Okay, my duration is 400ms -- but why 400? Shouldn't it depend on how far it has to move? It seems to me that the "speed" parameter in the exponential function has the same issue, does it not?
- iainmerrick 3y agoIf you use the version somebody else here mentioned, “move 90% of the way to the destination in 80ms”, does that make more sense? (I think it’s equivalent, just a change of units.)
- rav 3y agoBut can't you then also change the units on the linear animations? "move 40px/s until you reach the destination"
- 3y ago
- tambourine_man 3y agoOn mobile Safari, I get a translucent gray square showing the hit target over the toggle whenever I touch it. That removes any subtlety the different animations may show
- tgv 3y agoThe 8x slow-down argument is so naive, it's bad. Perception and interpretation change with speed. Listen to a song you slowed down. It becomes something entirely different. Compare https://youtu.be/r2ozuCXpVJY?t=70 https://youtu.be/r2ozuCXpVJY?t=70 and https://www.youtube.com/watch?v=QspuCt1FM9M&list=PL19J-0p1Irt98rF9hdqaF5jNMZIfthyET https://www.youtube.com/watch?v=QspuCt1FM9M&list=PL19J-0p1Ir... If you can't see the difference at normal speed, there is no difference.
- tambourine_man 3y agoCSS animations are much lighter on battery and computing resources than JavaScript and potentially smoother too. Something to take into consideration.
- chrisjj 3y agoI remember seeing how much better was iPhone than Android, having slick continuous sliders instead of old-hat binary switches. Imagine my disappointment when I found that the iPhone slider for mute didn't smoothly slide the sound volume to silence, as per the visual effect, but snapped it to zero just like the Android switch. ;)
- cranx 3y agoNice job, but it’s math, not some magic trick. I would like to see the animation functions graphed to describe how the numbers change relative to time.
- bufio 3y agoThe instantaneous one is best.
- petters 3y agoThe first toggle button on the page is the nicest to use IMO.
- Retr0id 3y agoSee also: CSS transition-timing-function: cubic-bezier https://cubic-bezier.com/ https://cubic-bezier.com/
- some1else 3y agoYou only need to smooth on approach. Something like `transition: left 200ms ease-out` in CSS should have you covered most of the time. Alternatively, you can build any kind of interpolation by replacing the `ease-out` function with the `cubic-bezier(...steps)` keyword: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...
- flykespice 3y ago[flagged]
- hailpixel 3y agoLove this article. I wrote basically the exact same technique almost 10 years ago. At the time I called it `lazy-easy` and still use it today. Sometimes you just want some nice smooth animation without all the state management: https://www.hailpixel.com/articles/lazy-animation-with-lazy-ease https://www.hailpixel.com/articles/lazy-animation-with-lazy-...
- krajzeg 3y agoAs a game developer, I find eased tweens with a preset duration better for most UI use cases. However, this other type of animation is extremely useful when you want to smooth a movement that is continuous/unpredictable, with no definite start/end point. Think for example a tile being dragged-dropped on a grid, snapping to the grid as the player moves the mouse, or indeed, the article's example of moving a camera around. For these cases, the exponential lerp trick is very useful, and not universally known. There are many games (some of mine included!) that use the less correct linear lerp and run into trouble with their animations feeling completely off once somebody runs the game on a 240 Hz monitor, or anything different from the 60fps that used to be standard. For this reason, I appreciate the article. It's usually hard to access this type of hyper-specific knowledge, as it is most often passed as an "apprentice-style" oral tradition from the senior people on a team to the more junior members.
- bogwog 3y agoWhatever is on the second half of that article keeps completely freezing up Firefox for me.
- dig1 3y agoI don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer checkboxes.
- wpm 3y agoAs the article says, and it seems like what a lot of designers feel as well: “Adding some animation to it would be cool!” I’m with you though. Most animation in UI is superfluous and annoying, if not down right rage inducing (like when the animation blocks input). A good example of an animation that I don’t dislike is the window minimize animation on macOS where the window gets “sucked” into the Dock. It’s useful because it relates a “where” that I can keep in my head. I click a button, where’d my window go? Down there, I just saw it get sucked down into the Dock.
- bayindirh 3y agoAlso some of these sliders are tri-state. When you touch it, it moves 3/4 way, becomes washed out, meaning "making the change, please wait", and either goes all the way & becomes green, or returns to its place and shows an error. Animations are tools. Use wisely, they inform and entertain. Use too much, they become boring.
- bayindirh 3y ago> I click a button in the real world, it changes the state instantaneously. Actually it does not. Flick switches have travel, click buttons have depth. Electronic buttons have lag, bigger systems have startup time (hence the blinkenlights). My dishwasher starts in ~3 seconds after I press start. The button travel is so much that I'm never sure whether it registered the press or not until I hear the water pump start pulling water from the pipe. > It gives me an instantaneous feedback. It's just because you're touching a button, and feeling the pressure on your fingertip. Nothing is in an "instant" in the world.
- a_cardboard_box 3y agoYou can also do quadratic smoothing without additional state, by moving towards the target with a speed proportional to the square root of the distance. Unlike exponential smoothing, this will actually reach the target.
- markisus 3y agoThe differential equations seem to show that this is a closed form implementation of a P (as in PID) controller. So the animation could be implemented without a call to exponential for small enough dt.
- castratikron 3y agoThis is just proportional control. https://en.wikipedia.org/wiki/Proportional_control https://en.wikipedia.org/wiki/Proportional_control
- IshKebab 3y agoYep. It is also known as exponential smoothing in other contexts. I wish the author had linked to the wikis for either of those things up front so people who had heard of it already (and know why you probably don't want to use it for your UI) could move on.
- 6510 3y agoMy favorite is to take the difference between current pos and target pos then move the thing in steps of half that (rounding up).
- Levitz 3y ago>Again, this begs us to add some animation. No, no it doesn't. Not at all. It's a MAP. It's there explicitly to display information, If I'm moving the map such a distance that an instant effect might not rely the information that place X is above place Y then yes, maybe an animation is in order, since that gives me more information, but every single iteration after the first one is worse, way worse, and the last one is one of the worst of them, feels like trying to drag your feet through mud.
- deleted 3y ago[deleted]
- kazinator 3y agoWhy all the complex formulas? This (for example) performs exponential smoothing: new += (target - old) / 4; That's it! (The exponentially smoothed animation looks weird to me, in any case.)
- kazinator 3y agoWhat you want is the switch to follow a potential function like this: .-------. \_/ \_/ The two low energy states are the on/off positions. Next, we want there to be some friction. Lastly, we imagine the switch being moved by a mechanism that moves linearly, and is connected to the switch by an invisible spring or rubber band. As the motion begins, the invisible linkage spring compresses and the switch moves only a little. Then it snaps out of the potential valley and moves across the plateau. Finally it snaps into the other valley, with a bit of overshoot.
- ggm 3y agoI continue to marvel at how often simple non linear tricks add some joy to interactions online. Or, in the case of colour perception are fundamental to understanding why two colours may not be perceptibly different enough to some people. The odd thing is that humans do not always understand acceleration. Don't run away from a fire uphill, in a belief it travels as fast (semi constant) across level ground: fire accelerates up hills. Kids rapidly learn the rate of movement across ground for a thrown ball but not always just how fast it will be moving under gravity when it smacks into your hands.
- sleepybrett 3y agoeverything old is new agin, dozens of this exact article in the flash era.
- spicybright 3y agoWe lost a lot of collective wisdom when flash died IMO
- sleepybrett 3y agoNot really, the openframeworks/processing/thi-ng umbrealla crowd never forgets.
- nico 3y agoGreat write up, love how much detail it goes into, and the interactive examples really help illustrate the points
- frfl 3y agoReally great write up. The demos seems to work fine in Chrome, but on Firefox they freeze up and cause they page to stop rendering completely as you scroll.
- zellyn 3y agoYeah, I had the same issue and came to the comments to find out it it was just me.
- Hnrobert42 3y agoIs it just me, or does a little square flash around the toggle. I am on FF Focus. It totally derails the exploration of the smoothing variants.
- grugagag 3y agoSimilar experience in Safari on IOS
- mediumsmart 3y agoMe too. Orion on iOS. So the border radius has a light leak?
- seemaze 3y agoI noticed halfway through this article I was just clicking away furiously. Is this a clever ruse by $MEGA_INPUT_DEV_MFG to wear out my mouse clicker quicker..?
- tadfisher 3y agoA generalized version of this is Hooke's Law, also known as the spring function. It works well for UI animation because it maintains velocity as the target x changes, instead of stopping/restarting like an eased tween would.
- shahar2k 3y agoit's funny, the thing that got me to understand calculus initially in class was seeing the graphs, somehow my brain immediatly "got" the difference between acceleration and movement and the shapes of those formulas... these days I think it might be a type of kinesthetic synesthesia! helps immensely since I work in animation and always had an easy time figuring out just the right math for procedural animation :)
- eviks 3y ago> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why does the user need to care about intermediate movement of this binary toggle? Then this is the fanciness that detracts from solving the major flaw of these sliders: you can't easily tell whether it's off or on
- arghwhat 3y agoThe animation clarifies the change. A user, heck even I could be confused by an instantaneous touch toggle. Why? Because my finger covers it during the press, so I would not see the change happen - if my mindset was "change that setting", I might rapidly tap it again, thinking the press didn't register. Such confusion does not occur with a (fast) animated transition. The map example is much more important. With animation, your eyes and brain recognizes a single image sliding around, giving you automatic positional awareness. Without, you eyes and brain recognize a slideshow of independent images, and makes recognizing and navigating the map a conscious effort. By no means an impossible effort, but an entirely unnecessary one detrimental to the user experience. At the same time, navigation UIs that react as navigation-less updates also tend to have the double-whammy of bad UX in the form of blocking and discarding user input during updates. Bad UIs are not bad because animations are bad, they're bad because they were made poorly.
- y42 3y ago>> The animation clarifies the change Isn't that a problem that UI designes (sorry for generalisation) created by themself? Let's stick to the toggle element. It replaces the classic checkbox. A "checked checkbox" leaves no doubt. A toggle box does.
- pazimzadeh 3y agofew things in the world are perceived as instantaneous, except maybe lightning. until recently people were not used to interacting with instantaneous objects. even a checkbox, in its original incarnation with pen and paper, would take a second to be filled. as long as the animation is interruptible, and the underlying change happens quickly (whatever the toggle is controlling) then animating the transition is usually better. I really like that their animation is interruptible.
- memalign 3y agoThe resource I come back to often for animation curves: https://easings.net/ https://easings.net/
- paipa 3y agoNo example from the ultimate, infinitely differentiable tanh(tan(x))-like family? How disappointing.
- GauntletWizard 3y agoPID Controllers for animations
- randomsolutions 3y agoMy thought too, or just a P controller.
- tnvmadhav 3y agothanks for sharing. this must've taken a lot of experimenting.
- qiller 3y agoStandard easing has one advantage being frame rate independent. Spring functions need some extra care to prevent things from... exploding.
- demondemidi 3y agoA lot of these don’t seem to work on my iPhone and Firefox.
- iainmerrick 3y agoTouch input in JS is a bit of a mess. You have to explicitly disable a lot of “helpful” default behaviour to make it work well, like auto-zooming on double tap or selecting on long press.
- nextaccountic 3y agoCan this be done in pure CSS?
- mxfh 3y agoCSS has its own easing function customization shorthand notation. So you could just use that. https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...
- DevoAKA 3y ago`transition-timing-function: ease-in-out` This reminds me of Medium spending months to change the underline beneath a descender: https://medium.design/crafting-link-underlines-on-medium-7c03a9274f9 https://medium.design/crafting-link-underlines-on-medium-7c0...
- skrebbel 3y agoThis isn’t like ease-in-out at all. It resembles ease-out a little.
- rabuse 3y agoCan probably try playing around with cubic-bezier, but not too sure.
- lausbub 3y agoSomething like this: https://easings.net/#easeOutExpo https://easings.net/#easeOutExpo
- Animats 3y agoYou never get there with exponential smoothing. It takes infinite time to asymptotically approach the goal. Also, that page uses 100% of the CPU in Firefox.
- moffkalast 3y agoIt's nice, but it's not nice enough to warrant going beyond transition: all and timing cubic-bezier in css. Maybe if browsers ever add native support without having to add extra overhead.
- Netcob 3y agoFor me the final few animations do some funky things... flickering, phasing out of bounds...
- kroltan 3y agoCan reproduce. Almost like it's intentional...
- k4rli 3y agoSame issue. Android FF just won't handle this "basic modern website". Probably 5+MB of js being loaded in.
- pixelesque 3y agoThe bottom half of the page doesn't even show in FF on MacOS for me... just white... Text selection also doesn't seem to work... is it all Canvas maybe?
- leetrout 3y agoSee also: Juice https://garden.bradwoods.io/notes/design/juice https://garden.bradwoods.io/notes/design/juice https://www.andy.works/words/the-most-satisfying-checkbox https://www.andy.works/words/the-most-satisfying-checkbox
- xkcd1963 3y ago[flagged]
- aappleby 3y agoI've used this for decades. The sweet spot for ui components seems to be moving 90% of the way to the target every 80 milliseconds.
- iainmerrick 3y agoThat's a great rule of thumb, I'll remember that one!
- ramesh31 3y agoi.e ease-in
- gelatocar 3y agothat's ease-out
- ustad 3y agoReminds me of that famous paradox.
- hn_acker 3y agoZeno's dichotomy paradox [1]. To travel a certain distance, you must cross half the distance. Then you must cross half of the remaining distance (one fourth). Then half again, and so on. [1] https://en.wikipedia.org/wiki/Zeno's_paradoxes https://en.wikipedia.org/wiki/Zeno's_paradoxes
- ramesh31 3y agoNever animate position. One of the number one reasons for jank on the web.
- bee_rider 3y agoFor some reason this makes me want a toggle that: * Moves slowly to about 75% of the way there while you hold the touch/click * Snaps the rest of the way on release I’m not sure what this could mean in terms of UX though. Maybe the setting is actually applied or saved at the end. Or it could be part of an “are you sure?” dialogue. The setting is applied as you hold, but you can hit escape to undo before it snaps into place.
- tdudhhu 3y agoI have seen a lot of (eldery) people try to slide the toggle but then nothing happens. So while your at it: also make it possible to slide the toggle. Or just use checkboxes.
- lucb1e 3y agoI also did this in the beginning with these new-style sliders that are really just checkboxes. Because they look different, I assumed they were different. (I was probably like 17 when these things became fashionable, not quite elderly just yet and also deeply into technology in general.) I also did it because it wasn't quite clear which direction was "on", so I tried to make it go in a specific direction. They did work, though, also on swiping, so that didn't help the learning process either. Anyway, point is: potentially more of an "it's new to me" thing than an "elderly" thing.
- aimor 3y agohttps://jsfiddle.net/u1vybhqg/ https://jsfiddle.net/u1vybhqg/ input:checked + .slider:active:before { transform: translateX(8px); transition: 1s; } input:not(:checked) + .slider:active:before { transform: translateX(18px); transition: 1s; }
- PennRobotics 3y agoThis, but set closer to 200 or 100 ms (and for me, swapping the translate 8 and 18 so that the switch barely moves on mouseDown, because that's damn close to a real switch's behavior). This seems like it could be a good compromise to all of the people complaining about lag and others who understand that the visual system is powerful and movement is a huge part of that. Also, it's relatively simple as far as CSS animations go!
- simon_kun 3y agoI love blogs like this. reminds me of 2005.
- jdiff 3y agoIn a lot of ways we're just now reclaiming the good parts of the flash-dominated web. Fair bit of bad collectively as we're relearning, but things are trending in an interesting direction.
- deleted 3y ago[deleted]
- omeze 3y agoThis is very cool, the camera over world example really highlights the difference
- mxfh 3y agoYes, but this seems to be convoluting two distinct problems. one is how to handle user inputs to a camera/world with inertia while moving whith a lot more variables to set for a certain desired feel, (why no long taps/mousedown to speed up the movement). While the button is just easing a fixed animation between two states with no intermediate input. Also what happens to the binary state of the app if the animation can be reversed before reaching final state, this is opening a can of worms for no obvious reason.
- saltyoutburst 3y agoIt's fascinating that easing, which is what this article mostly boils down to, is something that each new generation seems to need to (re)discover on their own. I remember being fascinated by Yugo Nakamura's experimental websites back in the late 90s because they were some of the first that I'd seen that had an organic feel due to liberal use of easing. https://www.youtube.com/watch?v=NLt7Gwnt3WY https://www.youtube.com/watch?v=NLt7Gwnt3WY
- shove 3y agoI remember sitting on the front row of a conference where Yugo was presenting and watching all the other Flash experts lose their minds as he ran through his demos.
- saltyoutburst 3y agoSeeing him present those demos/techniques in person would have been an amazing experience. Is there video of that presentation online anywhere? I'd love to know the background of how he developed his programming techniques and visual style.
- cl3misch 3y agoInstead of the wall of text and equations, it would have been helpful to plot the easing functions.
- coldtea 3y ago>However, this still looks a bit clumsy due to having a constant speed Does it? Looks much better to me, and preferred to waiting for a animation to be given more time to speedup while looking "smooth" (they seldom seem to be given the same time as instant or linear animations, do they? For some reason we have to be forced to enjoy them in half time). In fact I'd take the "instant toggle" in a heartbeat too. Real life toggles don't "exponentially smooth" from one side to the other either.
- globular-toast 3y agoI hate animations like that because they are intentionally slowing down the UI. I already clicked it, why are you spending several milliseconds to update your state? Animations, or anything else really, should only be used to improve things. Ask what the problem is, not what cool solution I should implement. It's ok to go to town if the page is artistic, like your blog, but if I'm filling out a form? Get your art out of here.
- hoelle 3y agoBeauty is often worth a little extra time. I'd rather walk a beautiful trail than a paved sidewalk beside 6 lanes of fast traffic. It's cool to choose the tools that appeal to your values. It's not cool to advocate for paving the planet in your quest for single-minded efficiency.
- coldtea 3y ago>Beauty is often worth a little extra time. I'd rather walk a beautiful trail than a paved sidewalk beside 6 lanes of fast traffic Beauty can be expressed with the toggle's design, with the window decoration, with the colors, with the wallpaper, choice of font, and so on. No need to be expressed with an animation. If your car did a little "song and dance" everytime you started it up that you had to wait to be able to drive it off, it would get annoying really fast.
- jdiff 3y ago
- buserror 3y agoAll of this work for buttons that toggle on a mouse/finger DOWN. How irritating that there is no intermediate state on the mouse DOWN and the toggle on the mouse/finger UP. Because it allows you to /cancel/ the action.. click, 'oops don't want that' drag mouse/finger out and release. No action taken. User is in control. Amazing.
- itishappy 3y agoIt's a toy example, not a polished UI. You can trigger this technique any way you like.
- mzs 3y agoAnimations like this give me a mildly nauseous feeling like a strobe light at an unsettling rate. The instant toggle does not.
- mati365 3y agoYour site crashes whole Firefox on Linux.
- ben-schaaf 3y agoWorks just fine here; also Firefox on Linux.
- ulrikrasmussen 3y agoJust go with the instant toggle instead of wasting time making the UI worse by making users wait for pointless animations.
- jdiff 3y agoWho is stuck waiting for a toggle or checkbox to finish animating? It's not blocking anything.
- ulrikrasmussen 3y agoThe user is. You usually wait for visual confirmation before you determine that the action you performed was indeed performed.
- jdiff 3y agoThe user isn't actually blocked from doing anything, a box is ticking, it's not a whole-screen state transition where you have to wait for things to settle before moving on. The box doesn't have to settle before you can recognize "oh, good, it accepted my input."
- __jonas 3y agoI like those little animations, you do not, that's fine because there is a simple solution for it: Just respect prefers-reduced-motion when implementing animations and everyone is happy.
- begueradj 3y agoInteresting that you got the idea to dive into animating a switch :) Maybe you could help the user to better distinguish the ON/OFF states by also colorizing the whole switch element, not only that "disc" (as it is done in Vuetify.js, for example, using the "color" prop: https://vuetifyjs.com/en/components/switches/ https://vuetifyjs.com/en/components/switches/
- tux2bsd 3y ago[dead]
- huhtenberg 3y agoSome of example animations are buggy - https://i.imgur.com/hQyh05s.gif https://i.imgur.com/hQyh05s.gif https://i.imgur.com/So6KsMt.gif https://i.imgur.com/So6KsMt.gif
- degun 3y agoSame on my browser and system: Safari on iOS.
- mawax 3y agoThe author addresses this: "See this jittering after the animation completes?"
- deleted 3y ago[deleted]
- Biganon 3y agoThis is explained literally in the next sentence of the article.
- huhtenberg 3y agoFirst one is, my bad. The second one is clearly a bug though.
- saltserv 3y ago[dead]