I 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 <i>stateless</i> method that handles pretty much any inputs in a regular way. That's really useful!<p>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?<p>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.<p>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: <a href="https://www.desmos.com/calculator/98ufbuzxhj" rel="nofollow">https://www.desmos.com/calculator/98ufbuzxhj</a>
As 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.<p>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.<p>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.
I 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.<p>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 <i>very</i> satisfying to use[0].<p>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.<p>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).<p><i>[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.</i>
I 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.<p>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.<p>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.
It'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. <a href="https://www.youtube.com/watch?v=NLt7Gwnt3WY" rel="nofollow">https://www.youtube.com/watch?v=NLt7Gwnt3WY</a>
For some reason this makes me want a toggle that:<p>* Moves slowly to about 75% of the way there while you hold the touch/click<p>* Snaps the rest of the way on release<p>I’m not sure what this could mean in terms of UX though. Maybe the setting is actually applied or saved at the end.<p>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.
Love 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: <a href="https://www.hailpixel.com/articles/lazy-animation-with-lazy-ease" rel="nofollow">https://www.hailpixel.com/articles/lazy-animation-with-lazy-...</a>
Really 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.
This is actually a really good approach and a good proof of concept for an animation / easing technique. Reminds me a lot of Flickity:<p><a href="https://metafizzy.co/blog/initial-demos/" rel="nofollow">https://metafizzy.co/blog/initial-demos/</a><p><a href="https://metafizzy.co/blog/math-time-resting-position/" rel="nofollow">https://metafizzy.co/blog/math-time-resting-position/</a><p><a href="https://metafizzy.co/blog/particle-to-slider/" rel="nofollow">https://metafizzy.co/blog/particle-to-slider/</a><p><a href="https://metafizzy.co/blog/flickity-begins/" rel="nofollow">https://metafizzy.co/blog/flickity-begins/</a><p>Especially this demo:
<a href="https://codepen.io/desandro/pen/myXdej" rel="nofollow">https://codepen.io/desandro/pen/myXdej</a><p>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.<p>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.<p>Since when has HN turned into Reddit?
Emotional design (<a href="https://en.wikipedia.org/wiki/Emotional_Design" rel="nofollow">https://en.wikipedia.org/wiki/Emotional_Design</a>) as it's finest form, there's a lot to tell behind a tiny little animation.
Interesting that you got the idea to dive into animating a switch :)<p>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: <a href="https://vuetifyjs.com/en/components/switches/" rel="nofollow">https://vuetifyjs.com/en/components/switches/</a>
A 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.
I wonder if there is some cultural preference for this.<p>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.<p>It’s still all very subtle…
This takes me back to old days of Flash programming and the infamous Robert Penner easing functions.<p><a href="http://robertpenner.com/easing/penner_easing_as1.txt" rel="nofollow">http://robertpenner.com/easing/penner_easing_as1.txt</a>
What you want is the switch to follow a potential function like this:<p><pre><code> .-------.
\_/ \_/
</code></pre>
The two low energy states are the on/off positions.<p>Next, we want there to be some friction.<p>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.<p>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.
I 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.
From the title I somehow expected Planck taper window which comes up in partition of unity.<p>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.
The resource I come back to often for animation curves:<p><a href="https://easings.net/" rel="nofollow">https://easings.net/</a>
You 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: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...</a>
> Yes I’ve made a whole procedural map generator & renderer just for this example, and I have zero regrets.<p>You can be salty about excessive use of animations in modern UI all day long, but you have to respect that level of commitment.
You 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.
This is just proportional control. <a href="https://en.wikipedia.org/wiki/Proportional_control" rel="nofollow">https://en.wikipedia.org/wiki/Proportional_control</a>
The 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.
><i>However, this still looks a bit clumsy due to having a constant speed</i><p>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).<p>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.
On 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
Author 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.
It’s funny how emotional discussions about UI choices are.<p>I liked the article and its demonstrations because I learnt something.<p>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.
hmm, 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?
I 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?
I 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.
An I the only one upset this is done by (excessive) JS usage?<p>It would be my deepest displeasure to bring a button toggle animation to production that requires more than CSS.<p>Quick example I found:<p><a href="https://hudecz.medium.com/how-to-create-a-pure-css-toggle-button-2fcc955a8984" rel="nofollow">https://hudecz.medium.com/how-to-create-a-pure-css-toggle-bu...</a><p>Easing/Smoothing is possible with transition-timing-function.<p><a href="https://www.w3schools.com/cssref/css3_pr_transition-timing-function.php#:~:text=Definition%20and%20Usage,change%20speed%20over%20its%20duration" rel="nofollow">https://www.w3schools.com/cssref/css3_pr_transition-timing-f...</a>.
I 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.
it'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 :)
I 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..?
You never get there with exponential smoothing. It takes infinite time to asymptotically approach the goal.<p>Also, that page uses 100% of the CPU in Firefox.
Nice 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.
Why all the complex formulas?<p>This (for example) performs exponential smoothing:<p><pre><code> new += (target - old) / 4;
</code></pre>
That's it!<p>(The exponentially smoothed animation looks weird to me, in any case.)
I remember seeing how much better was iPhone than Android, having slick continuous sliders instead of old-hat binary switches.<p>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.<p>;)
All 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.<p>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.
>Again, this begs us to add some animation.<p>No, no it doesn't. Not at all.<p>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, <i>maybe</i> 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.
Some of example animations are buggy -<p><a href="https://i.imgur.com/hQyh05s.gif" rel="nofollow">https://i.imgur.com/hQyh05s.gif</a><p><a href="https://i.imgur.com/So6KsMt.gif" rel="nofollow">https://i.imgur.com/So6KsMt.gif</a>
> 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<p>Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing.<p>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?<p>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
I 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.<p>UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer checkboxes.
The 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 <a href="https://youtu.be/r2ozuCXpVJY?t=70" rel="nofollow">https://youtu.be/r2ozuCXpVJY?t=70</a> and <a href="https://www.youtube.com/watch?v=QspuCt1FM9M&list=PL19J-0p1Irt98rF9hdqaF5jNMZIfthyET" rel="nofollow">https://www.youtube.com/watch?v=QspuCt1FM9M&list=PL19J-0p1Ir...</a><p>If you can't see the difference at normal speed, there <i>is</i> no difference.