Animation is hard. Getting "smooth" animations is even harder. Getting them to work in all scenarios? Forget it.
That said...this "exponential smoothing" thing seems like a genius hack. I'm excited to play with it more!
SOURCES
lisyarus.github.io/blog/progr...
/ @lisyarus
@lisyarus
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏
webdevs really do be making a whole blog about animating a button
😂and Theo make a video about this blog
about animating *every* button
Frontenders gotta justify those paychecks. 😂 Real talk as a full stack I get in the habit of just getting it working and done, back or front end. I always come to appreciate the designers, frontend devs, and ui/ux that somehow polish the app that only a robot could love.
That’s how we roll
backend devs really do be making a whole blog about retrieving a single database row
"Oh no Math! My worst fear as a JavaScript Dev!" rofl.
@@monad_tcp kek
Accurate, given his hiccup with understanding how floating point arithmetic works in his previous video
This is a Dependant-only developer issue fs
1:41 deltaTime is not the "amount of time that we want it to take", it's more like the "amount of time that elapsed since last frame"
He is really not the math guy lol
Funnily later in the video he uses the correct explanation, But ye I was screaming when I heard that .-.
My ears started bleeding
@@valourus Though it's more of a physics or animation thing than maths
High school math jump scare
Differential equations are legitimately undergrad college math - like calc 3 in some curriculums
@@NateVolkerdepends on the country and stuff. In year 12 Australian high school, differential equations are in Advanced maths, simple integrals are in maths extension 1, and more complex integration is in maths extension 2, like using integration by parts and stuff
@@NateVolker diff eq are kind of easy to understand intuitively, specially if you are not doing a test and can use the wikipedia to consult the table of rules for differentiation because you forgot most of them.
I am a JavaScript dev. I dropped out in 6th grade.
@@NateVolker Wild, we did them in the last two years before college.
And here I thought the conclusion of this whole thing would be like, "And you can get this perfect animation with this one line of CSS."
It blows my mind how deep the ignorance for these "everything is JS" frontend devs go!
The next step is making it all CSS
it should have been the first step
@@krellin The blog post explains the math behind it and CSS is also doing just math in the background.
@@Shulkerkiste yes but CSS is processed on the GPU and in parallel, it doesn't block rendering of the UI like JS does
Kid named cubic-bezier():
@@krellin NO, it shouldn't, if it was the first step you wouldn't learn anything about how it actually works
Even a junior game dev will have encountered the classic "My animations shouldn't be locked to framerate, but the amount of time passed since the last frame render" Lerp with deltaTime is such a fantastic function because it doesn't require knowning the endState, just your currentDesiredTarget and it will always smoothly animate towards it.
the construct game engine's blog has an article on basically the exact same concept titled "using lerp with delta-time", but it ends up with a different formula that i find much more intuitive :) lerping by 1 - (1 - f) ^ dt, where f is the amount of progress you want to have made over the course of 1 second can also multiply dt to change the scale of things, e.g. dt * 60 would make it so f would be how much progress is made every 1 frame at 60 FPS, except it's framerate-independent
Oh wow. This is useful
4:54 "The missile knows where it is at all times. It knows this because it knows where it isn't. By subtracting where it is from where it isn't, or where it isn't from where it is (whichever is greater), it obtains a difference, or deviation. The guidance subsystem uses deviations to generate corrective commands to drive the missile from a position where it is to a position where it isn't, and arriving at a position where it wasn't, it now is. " (the rest isn't required for this case)
8:30 Yet, Apple think it's perfectly acceptable to not move the input focus to the obviously next active window when changing spaces until the animation (or the fade if you disable seasick-mode) is completed! I'm so sick of typing half a shell command in the editor on the previous space when changing to the space with my terminal. Who has the patience to sit and wait a whole second for the input focus to move to the terminal before start typing!? Ironically, ignoring input while animating; rather than letting me type half a git command in an editor and then have copilot hallucinate some insanity based on my misplaced shell commands; would be somewhat better than the current behaviour. But of course the real and simple solution would simply be to move the ducking input focus _before_ starting the animation! It would not affect patient users who patiently sit and admire the ridiculously slow and motion sickness inducing full screen slide animation, at all but it would make my life much better. I cannot think of any reason that the input focus should remain for about a second (maybe it's less, but it feels like ages to my ADHD) on the previous screen. Are there really anyone who regularly decides to change to a different screen with the intention of finish writing a couple of words in the previously active window while the animation finishes?!
This is why I don't use spaces. Also how do you switch it to fade?
@@mikkelsvartveit Yeah… I'm trying to get used to using a built in shell in the IDE rather than switching spaces, but I do prefer to have everything maximised to minimise distraction so it's not ideal. And also since alt-tab behaviour (even with 3rd party Alt-tab apps) in MacOS is also terrible, having two maximised windows on the same space is far from ideal. You chan change the animation from movement to fade by checking "Reduce motion" in the system settings. It's under Accessibility > Display. But this disables almost _all_ animations (at least all full screen animations) systemwide. And it also changes the "prefers-reduced-motion" value from "no-preference" to "reduce" in CSS media queries in all browsers, so it will disable a lot of animations on websites too. Which is fine by me, since I genuinely find large animations nauseating and also most small animations are just annoying. So it improves web browsing a lot, but absurdly in MacOS itself it just replaces the animations with fades with the same transition speed as the animation. And this makes the spaces-lagging-input-focus problem worse because I can see the next window quite early in the fade but I have to watch the terminal cursor to see when the focus actually has moved. Which with my ADHD feels like fricking ages!
Web devs discover fundamental principles of animation: part 1
Next step: they should start learning CSS and animate it there.
"delta over delta time" 🤣🤣
Outer Wilds mentioned 🎉 It's progression is you gaining information so you should play it as blind as possible.
YESSSSS S S S SS S S S S SS omg i exploded when he said outer wilds
Btw it is exponential moving average again (same thing as in the load balancer video). In the lerp(position, target, min(1, speed * dt)) position is the smoothed value, target is the noisy value and the last part is the factor.
Everything contained is essentially required fundamentals for any game devs and then some, most have entire collections of hyper optimized easing / zoom / jump / delay / mass and meet type animations and an entire vocabulary exists to describe them and mixing them together is an art form of it's own. One of the things i do miss from when i was a tech art!
There is another game that solved the float precision thing in an interesting way: StarMade (back when it was first released at least) divides the world into chunks that each have their own origin, and along the borders the game does a smooth transition between the two coordinate systems. That is of course much less elegant than the outer wilds solution, but is also a neat trick :)
15:00 YOU ARE A PROGRAMMER, MAKE A SMALL SCRIPT TO TRANSLATE YOUR VARIABLES BACK FROM THEIR SHORTHAND WHEN YOU'RE DONE! something like this maybe #!python #took me 3 minutes. could probably optimize better, but the point is to save time above all else def expand(in_str): return in_str.replace('x','position').replace('a','target').replace('c','speed') print(expand("d/dt x = (a-x) c")) # d/dt position = (target-position) speed I don't know what sort of math markup is being used, but surely there's some way to define shorthand, or regex replace or something like that and then run your mathml through it. And if there isn't there should be
My entire issue with the whole article is the adding to position. Switches are fixed width, fixed state. You can set position to an interpolator function based on position. The approach given is using position as a state which is excessive.
The switch is just the simplest introductory example. The point of the article, taken as a whole, is to show a smoothing function that generalizes to all sorts of scenarios such as multi-dimensional, infinitely-scrolling map cameras and beyond.
I was expecting some new css easing function, but ended up getting memories of war from uni.
for your audio engineer take: this is simply a low-pass filter on the step function (implemented in this case as a first-order "infinite impulse response" filter).
1:40 dt or Δt, also known as delta time, is the time between two timestamps. (delta is a greek letter, and it's usually used in math to mean a difference/distance between two things) Usually this is done in game development, and it's the time between two frames. So you can move more or less depending on how long the last frame took to render, etc.
amazing format! i like it.
0:00: 🔄 Effective animation technique for various applications with mathematical explanation and practical examples. 3:26: ⏩ Exponential smoothing technique enhances animation by addressing sudden jumps and providing a smooth transition for user interaction. 7:34: ⚙️ Improving animation smoothness and functionality through code adjustments and easing functions. 10:38: ⚙️ Optimizing animation performance by adjusting automatically based on proximity rather than time elapsed. 14:12: ⏳ Efficient numerical solution of differential equations for smooth animations in real-time. 17:49: ⏳ Limitations of exponential animations: technically infinite duration, but in practice reaches precision limit. 21:27: 🎮 Insight into exponential smoothing for animation speed parameters in game development. Tammy AI: Get video info faster & better
This was a really cool video. Thanks! =]
This is cool. I've used the "simple" version when programming games, because it's an easy way to get smoothing. But I didn't realize it could easily be made to work correctly when dt is varying.
i have recently been using hyprland WM for my laptop. and man those bezier curve animation for window's are sooo smooth man. every time i go back to windows i realized how jank windows is especially in terms of looking and feeling good
I used exponential smoothing in stock analysis, neat to see it used in something fun!
I love the attention to details.
Deltatime is not the amount of time you want the animation to take. It is the time pffset between frames. It makes it so your animation is unaffected by the amount of frames your computer can pump out
While the content of the article might be "naïve", it actually contains good amount of math and comparison behind the little smooth animation thing we used in a lot of places. Very well explanation for many. You will be surprised tons of devs (includes game devs) who used it daily but never try to know the logics behind. They used it because it feels smoother comparing to other linear/cubic approaches. Even a lot of good animations later are fairly based on this type of thing and keep iterating upon it. I was kinda upset as a "semi-senior" dev (ppl called me senior but I don't feel like it), instead of trying to understand/appreciate the math/concept behind, and take the switch as the simple example how a math function can effectively affect our perception, the comment section has fair amount of "we don't need animation" "who cares" "a whole blog about animating a button". I mean even we know that it doesn't mean we need to use it, but know some math isn't a bad thing right? The web community has a lot of geniuses, they made the entry bar so low that everyone can quickly pick it up and build something, but also now we have huge amount of "pragmatic" coders that don't appreciate simple thing and don't realize we stand on the shoulder of giant.
I used to code with this technique a lot, but then I questioned why I was avoiding storing that little bit of state value, it wasn’t because I didn’t have the memory, or the cpu cycles to spare, I was being kind of lazy really. My preferred way to animate was to conserve momentum, just like objects do in reality. You can use a Tweening library, or put something together yourself After that, I found it was actually even less code and hassle to write than these stateless Lerp techniques, plus I could use meaningful quantities like duration ( measured in seconds) or maximum velocity ( m /s), and not arbitrary scaling values like ‘speed’ ( without any tangible unit)
I have used this (although the naive, only-valid-for-small-dt version) plenty of times. I don't quite like how slow it is at the end, though. Some times that's fine, but some times it's not, and you can really notice that extra fraction of a second things take to align. The immediate solution would be to increase speed, but then it goes too fast when things are far away. I dunno. Right tool for the right job, I suppose.
I love lerp, when I first learned about it, it helped me so much :)
Why does the blogpost look so much better in this video? Arc Boost?
Ya what the whole UI of the blogpost is different from the video how ????
Read mode maybe?
I tried them all in the source article, and honestly I liked the cubic easing the most.
Well you could also use sine or cosine or tangent. (You got to cut theinterval that you want for example pi *0.5 to pi *1.5, I mean the part between the top and the bottom part of the function. Also adding exponents can make the animation more „springy“
So Outer Wilds runs on Futurama warp drive... How am I not surprised?
Can't tell you enough, how often and how powerful your channel has been in exposing me to new and exciting techs! (at least to me) I don't know how you find all this stuff, but I want access to your sources! Are you pulling mostly from some techy website, or are people just posting interesting things in the discord? My brain yearns for a 24/7 feed of this sort of thing. Google (and other search engines) have been unfortunately letting me down, more and more.
I don't know what you dev's are taught but delta T(not "dt", it's something else but similiar) is basically the difference between two times of significance. Can be the difference between the desired finish time and beginning time, the time has passed since beginning, can be the time difference between two events, whatever. So you all are right.
I've been using it ever since I started game dev many years ago since it seemed like a no-brainer solution
that's what I've been doing everywhere, didn't understand why people were messing with lerp when this gets you a smooth animation with only current and target positions needing to be stored
Uhm, are there really people who think that 1-exp(-x*dt) looks weird? That's like most common thing in science when it comes to describing processes...
You need to know about science to be familiar. Many don't.
Film in 60fps then already. 😁
You should read up on Robert Penner's easing functions
im partial to the sigmoid (σ = 1 / (1 + e ^ (-αx)) function to get that 3b1b manim look. I set alpha to 8 or 10 usually, and it looks pretty good!
I love how TLDR is added in about two-thirds of the way through.
UI/UX is going to be reintroduced in 2025; thanks for sharing this video Theo. The example explaining (Unity's transform) floating points was very valuable.
the bots are early
20:00 that also happens in Minecraft when you get far enough from the spawn point and it breaks the world generation too, it's pretty funny.
This was so sick. The final boss is writing this in Tailwind lol
I wonder if the 2X speed issue is related to this: en.wikipedia.org/wiki/Nyquist_frequency
I know it's the simplest courtesy, but I appreciate that you bother always putting the links. It feels more and more common that people won't bother, even if they mention it in the video 😿
The blogpost hangs tab when navigating to a certain section on Firefox, is it only me?
Gonna get some heat for this, but who cares... 1: You're adding totally unnecessary complexity. Now you need to keep track of things to know what state its on. If you have things that are dependent on it, you slowly build up a nightmare. 2: The concept of a TOGGLE comes from mechanical switches where something springy... guess... JUMPS. It's not unnatural, it's how it IS. You're supposed to throw it, not hold on to it. 3: This whole thing about toggle's nicely described a... SLIDER. Which has a very very slight ease out for slider potentiometers but NOT for slider switches. And in that case, you want to track the user not some time. 4: It's AWFUL UX to make a user wait on an expected instant action just because someone think it's a cool thing. p.s. lengthy unnecessary slow mo annoys viewers to no end. "cool animated UI" annoys users that just want to get ish done fast to no end. Which i guess it's why it ends up as mental masturbation material for people that don't actually have to use the ish they make...
Designers run wild
Also, a pretty animation will not fix a shitty product
The author seems to be more active in the game dev world where this type of animation is super useful and solves problems that a cubic animation just can't. I agree that a toggle switch should feel snappy. But, a toggle is a simple way to show difference in animation equations. The author went on to show the exponential equation being used for camera movement which is a more practical usage. So, I don't hold it against them for using a toggle switch initially. This just feel like a weird hill to die on.
If they dont add complexity then they can self congratulate and they measurebate
Nope. Animation gives users more intuitive feedback from action. And as a result it looks and feels much better. You don’t need to wait animation and since it’s just a view, the real state was toggled instant. And as you can see in the video you can interrupt the animation, but you never clicking thousands times per sec on the button in real life 🤷♂️ (Allegedly)
This is cool
I audibly gasped when I saw the title "differential equations (oh no)
Now make a video about using this exponential animation with Tamagui..!
I have an unfinished game where I find it hard to make the player movement smooth. Should I make the scrolling when the player reaches the edge smooth?
damn, dude just discovered lerps. I think that's how every dev reacts when they discover lerps. lerps are cool
It's not linear. Were you listening at all?
@@conradrobinson7941 but he's using lerps. most of the time I've used lerps was for this kind of stuff. I know what lerp means, but here he's using the linear interpolation for exponential stuff
I could enjoy these videos more if you would not pretend to not have pre-read the articles
I’m just casually watching this in cs class, we where just learning about this and I just get a little cheatsheet from Theo just on time 😭
It’s a rite of passage for all compsci students to think they invented a PID
This is like a simple smooth gliding code in Scratch😂
Its cool beans.
Saw this in Jonas Tyroller's video: Dear Game Developers, Stop Messing This Up! Where he wrote it as this: float blend = 1 - Mathf.Pow(0.5f, deltaTime*lerpSpeed); position = Vector3.Lerp( position , target, blend ); or float blend = Mathf.Pow( 0.5f , deltaTime * lerpSpeed ); position = Vector3.Lerp( target, position, blend );
My $0.02 hot take: If you're doing any kind of skeuomorphism based UI, you probably should make that switch/toggle (near) instantaneous - that's how switches work in the real word. It also saves you from edge cases where the user click again while the animation is running.
The animation runs over literally 10 frames there's no chance of that
Hard disagree - the movement should be made easy to track because of the possibility of user error. The extra time allows users to zero in on the changing element and revert undesired actions. Real world don't need this - they already have tactile feedback, making it very clear which one was pressed when the user fat fingers them. And the one that don't (capacitive ones) suck.
I started to like your videos as I was exposed to some new things, but they dragged on and now I realized, well, change the name to iReddit. I need summation not a word by word audio book
3 t squared minus 2 t cubed ... "this math is insane!" Yeah, ok ;) Thanks for pointing this out, though: I now know what to do next time I need to animate anything. I've always noticed things moving nicely in certain UIs and games, this must be how they do it. Please continue to do more like this in the future. It has applications everywhere. Diversions like 22:05 are also educational. 20:44 This must be normal for any open world game. Elite Dangerous has to model entire real life scale solar systems down to pebbles on the planet's surface.
16:08 got me haha
13:01 Another typo: "out" instead of "our"
I have been an early adopter of the iPhone (got it as soon as it was possible) and have lived with smartphone interfaces for at least 15 years and yet I still find these toggles harder to understand than good old checkboxes. Unless there is also some color these toggles to me feel confusing. Maybe it is also because I grew up in a country where light switches are not consistently mounted the same way (even if the electric code always said they should) so there is no consistent association for me between left-right, up-down and on-off. Is it just a me problem?
It is not just you. I also often find them confusing. I also notice that they are often used in applications where confusing what state means ON and which means OFF may be intentional, such as whether to allow certain cookies.
Generally, circle on left is off and circle on right is on - I think this corresponds to typical English/Latin based left-to-right reading direction, so for RTL language readers it may seem strange or unintuitive. Most physical electronic consumer devices follow these conventions, such as with power switches, though I'm not sure if that's an unwritten rule / convention or actually standardized by any governing body. Light switches are inconsistent even in the US, but generally off is down and on is up (unless 3+ way lightswitches, in which case it could be either). I've heard lightswitches are inverted in other parts of the world, so vertical switches are not commonly seen in UI designs. "Up" is generally associated with "on" and "down" with "off", also presumably due to cultural / language biases - you will often hear of services being "up" or "down for maintenance", for example. Best practices usually indicate greyed out background for "off" state and some color for "on" state (green or blue are common) -- it's also generally advisable to avoid "green is on" and "red is off" due to Red/green color-blindness, despite this being a common association with "on / ok" and "off / incorrect". It is generally bad design to have a design be centered purely around position, unless you at minimum have labels corresponding to what the direction means. For example, the thumb or a label on the side could have an icon with an '×' for off and '✓' when switched to on, or text inside the switch corresponding to it's current state (on / off)
imaging not using that bezier
And then comes the reality that 80% of users have a device so crappy it just lags over the entire animation 😂
Take a few seconds: thing that works. Take a few minutes: thing that works and animates. Take a few weeks, study some math, take a few more weeks and write animation interpolation framework, take a few more weeks debug edge cases, and you have a thing that works and animates and "feels nice". I know which of these I pick, and I know the world calls me lazy, and I call the world crazy.
Great video, I prefer differential equations over React any day
Is this a reupload, because I swear I already saw the video
The minecraft farlands also exhibit the behavior described in 20:00
I actually don't like the human hand stuff. As i get older it starts to give me a head ache.
Honestly, I don't think switches are a good demonstration for this. None of the animated versions look good. Switches don't move like that. Pay attention when flicking one and you feel the force you need to apply to get it to move rising to a point, then it goes the rest of the way quite suddenly. I think to animate it with code, you'd need at least a two-piece function. If we're plotting time vs displacement, then the first piece needs to go from zero to something like (0.8,0.5) and the second the rest of the way. Not sure about the shapes of the pieces, but something that slows down would probably work best for the first one.
How low the Humanity fell if we need a dude to read a webpage for us… -_-
IMHO. Looks great, works perfect on website with 1 tab and only browser opened though. As soon as it gets to the real world, when user opens 100500 tabs, a lot of stuff going on, browser stops rendering animations normally. Better not to spend time on them at all
That's not what happens in the real world though... On mobile at least, even if somebody has 200 tabs open, they won't all be *running*, the non-used ones will be paused.
@@RT-. of course they won’t be running all together. They’ll be working in “sleep” mode. js still executing on BG, something is fetching when resources are available
@@MrMassaraksh Maybe if you have a service worker... But yeah I disagree with the statement that most people will have their browser so slowed down that they won't be able to see animations properly
the real world you say.. 😂
Does this guy do anything other than read other people's blogs? It's the literate version of reaction videos.
like for Outer wilds!
More
Animations wastes gpu power, bringing the heat death of the universe closer
thumbnails whyyyyyyyyy
Math
What is Math?
Just use spring physics for interpolation and your golden
🧔♀️
not true, its called tweening, everyone uses it. especially in UI
too bad this doesnt exist in css
3:16 its not annoying, its just logarithms, which are the inverse of square roots
Keeping track of state? That's the browser's job. Just add/remove a class like "enabled" and have CSS do the animating.
so the universe DOES revolve around me?
Calculus jumpscare jesus
From to Outer Wilds, what a journey. Very interesting.
First
the scamming thicc ass bot beat you :(
Web devs rediscovering lerp makes me glad I don't do web dev
no animation .. no jumping problem .. jumping is the animation .. perfection ( ͡° ͜ʖ ͡°)