7 ms·

Every Frame Perfect

869 points by ravenical 4mo ago

flyingshelf 4mo ago
This is the kind of things that bother me when using software and unfortunately almost every software is affected. I just look at the largest tech companies in the world that with their unlimited finances cannot produce software that isn't glitchy like this.
hankbond 4mo ago
This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.
- jastanton 4mo ago
  Or if the author mocked out what each of the bad examples should look like if done properly.
- seemack 4mo ago
  I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made. If you're curious, you can see it here: https://www.thisischris.dev/projects/project-6/ https://www.thisischris.dev/projects/project-6/
  - akersten 4mo ago
    Thanks for highlighting the "one element cross fades into a totally different one" example. That particular type of animation really makes an app feel ungrounded and unreliable to me, it gives a sense that the UI elements aren't really tied closely to the data and are just barely existing. And somehow I see it all the time across tons of apps. The improved versions where the elements actually transform into each other, sharing the same visual real estate, is so much better.
    - seemack 4mo ago
      Ty for the kind words! I completely agree with you too. Compose added a Crossfade modifier that makes it super easy to apply the animation to a content switch but it's often applied in the lazy way you mentioned.
ikesau 4mo ago
I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like. At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts) I think many of these transitions are unnecessary and would feel just as good if they snapped immediately with instantaneous reflow.
- tsunamifury 4mo ago
  Motion is critical for reorientation after transition. Often with out it your brain has to rescan the entire page on each refresh.
  - geokon 4mo ago
    Do you have some concrete examples? "Back-in-the-days" you'd click and stuff would instantly happen, and I don't remember anything being more difficult to visually interpret. On my Kubuntu desktop if I disable all animations (the whole compositor) I don't feel there is an increased cognitive load of rescaning things - but maybe it's my preexisting memory of the UIs and certain baked in UI expectations. Maybe this animated stuff helps people that are computer illiterate? (software made for the lowest common denominator)
    - billyp-rva 4mo ago
      Consider trying to follow along with this app [0] without the transitions. Without them you'd experience much more cognitive load to staying oriented. [0] https://app.ilograph.com/demo.ilograph.Ilograph/Request https://app.ilograph.com/demo.ilograph.Ilograph/Request
      - jstanley 4mo ago
        I think this is actually a perfect example. The animations make it more complicated to follow, not less! If it just highlighted the stuff you were hovered over it would be easy to understand, I honestly don't get the motivation behind the animation.
boredatoms 4mo ago
This explains why I feel compelled to turn off any animation whenever there is a toggle to do so
renox 4mo ago
Bah, each time someone say this they "forgot" that one side effect of 'every frame is perfect' is that it can increase latency.. Perfection or latency? That should be the user's choice not the developer's..
sam1r 4mo ago
I feel like OP brought up a good problem to solve, with no solution. I dream of the days where posts like these end with "5 ways to better execute on this today". Instead, we get a zooming in/out raccoon (making fun of the reader, IMO) for recognizing this problem via the OP author. Maybe it's just a really hard problem to solve across all devices & latencies... Perhaps more time needs spent on "problem solving" vs "problem description".
- keane 4mo ago
  The expectations set for what turns out to be an article without solutions are also raised by the title the author chose. Show us these mythical perfect frames?
vlovich123 4mo ago
It would have been compelling to describe / show what it should have looked like. Because the only alternative for some of these would just be sharp jumps instead of any animation - animating simultaneous appearance and transition of information will inherently result in frames that look imperfect.
mrob 4mo ago
I'd rather have an imperfect frame now than a perfect frame later. Latency should be the top priority for any UI, because when latency is low enough it feels like a part of your own body, which minimizes cognitive load. Animation is especially bad for this, because animations add hundreds of milliseconds of latency.
- inigyou 4mo ago
  You might have thought the title was about Wayland and you're right. But this isn't about Wayland.
- cloogshicer 4mo ago
  I think that's a false dichotomy. The examples the author gives would not be slower in any way if done correctly.
  - chaboud 4mo ago
    However, the author makes these assertions: - No partially loaded content. - No relayout while content loads. Holding those as hard rules leads to delay or rejection. Instead, while I agree it's better to have everything up front, gracefully handling cases when we don't is important, and some degree of responsiveness, even with partially loaded content, often makes for a better experience for the user than a delay. Just be up front about it and find ways to keep continuity of relationship and smoothness. Diffeomorphic mappings are your friend...
    - true_religion 4mo ago
      I saw that but couldn’t really connect it to the rest of the article because none of their examples had data loading. Like the issue with the osx side bar transition is that the order of operations makes no sense. When expanding, it makes the buttons vanish only to animate their reappearance from nothing once a panel slides over them. It would make sense in the physical world if the panel occluded the buttons during transition. During closing, the reverse problem happens. The buttons aren’t occluded but clip through the panel like it became water. It happens fast but not so fast that you can’t see it, and there is an unnecessary distortion. In today’s world of AI, good taste is all we human workers have so we should call out cut corners.
jadar 4mo ago
I think a lot of these are because Apple has built animations into their products as first-class citizens, but that means that they need to somehow figure out how to compose them well. (Which obviously is a rather difficult problem to solve!) In my experience, you end up spending a lot more time trying to get all of the animations to work well together than you do on creating the actual UI, and that time is just not worth it if your start and end states are beautiful and intuitive. There's also the cross-UI-framework tax that has come up since Apple has allowed mixing SwiftUI and (App|UI)Kit, and animations are part of that.
- ezst 4mo ago
  I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times". Old Apple knew not to overdo things.
skybrian 4mo ago
These seem like low-priority bugs to spend time on? Most apps have bigger problems.
- ChrisLTD 4mo ago
  These aren’t bugs in the traditional sense. They built the animation system to work like this, and replaced the old system that didn’t produce these psychedelic transition states.
  - skybrian 4mo ago
    Is there more about what they did somewhere else? I don’t see any implementation details in the article.
- layer8 4mo ago
  The issue is that we didn’t have these kinds of incongruent animations twenty years ago, and nowadays they are the norm, worsening user experience.
- deleted 4mo ago
  [deleted]
mbostock 4mo ago
There’s a similar principle of congruence in information visualization, stated in Animated Transitions in Statistical Data Graphics by Heer & Robertson as: “Maintain valid data graphics during transitions. To ensure viewers’ mental models are congruent with the semantics of the data, we suggest that, as much as possible, intermediate interpolation states remain valid data graphics.” https://idl.uw.edu/papers/animated-transitions https://idl.uw.edu/papers/animated-transitions
throwaw12 4mo ago
I would love to understand these people, really! On a personal level, if thing works - I say, cool, lets focus on something else now. But I have worked with people who are similar to the author and we will get into the conversation: - they: wait, but the bundle size is 2.4Mb, it can be improved a lot - me: by how much? and we have 10k users/day and we have cache policy setup - they: we can reduce it to 1Mb, imagine saving 10k*1.4Mb every day - me: yeah, but its not costing us much, if you focus on making it perfect your salary will cost us 2 years of outbound traffic cost. - they: no, but its not perfect I admire those people, because they're valuable asset in some companies (e.g. Google scale, saving 1.4Mb for 1 Billion people every day is a lot), but my mind doesn't even want to think about what's perfect. How do I get there? What are the resources I can read and learn from to look at things to make them perfect?
- piskov 4mo ago
  Broken windows theory The issue with “premature optimization is bad” is that some see it as a permission to not optimize at all. Hence you eventually end up with a system where everything is bad. — Although for some of us being obsessive-compulsive weirdos this is the only way of life: an itch that keeps on physically scratching until resolved. “Be guided by beauty. I really mean that. Pretty much everything I’ve done has had an aesthetic component, at least to me. Now you might think ‘well, building a company that’s trading bonds, what’s so aesthetic about that?’ But, what’s aesthetic about it is doing it right. Getting the right kind of people, and approaching the problem, and doing it right […] it’s a beautiful thing to do something right.”
  - throwaw12 4mo ago
    > Broken windows theory Absolutely, but on the other hand businesses operate with lots of broken windows as well, and they are fine with it. Dilemma I am having is, on one side, business needs my best judgement for today and short term, because this is how most businesses survive, on the other hand, on a personal level I feel like I am stuck making non-perfect decisions, hence I can't even think about perfect world, because I am not training that part of my brain.
satvikpendem 4mo ago
An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place. I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
- yellow_lead 4mo ago
  Not for me, I always turn off animations. It feels fine for me, and I can operate the phone a lot quicker without having to wait for animations to complete.
  - intrikate 4mo ago
    I don't turn them off entirely, I kind of enjoy the feeling of momentum animated elements can provide, but I definitely do go in and speed them up massively. I find that when a phone is feeling unresponsive or sluggish, it's usually because I'm moving two steps ahead of the animation and it has to catch up. Feels like tripping on your own feet.
- ivanjermakov 4mo ago
  Give it one day and you won't come back to those sluggish animations slowing your intent down.
  - satvikpendem 4mo ago
    I have it at 0.5x. 0x is just not smooth enough, plus sometimes apps actually don't load fast enough so you're stuck waiting for them anyway.
- bvrmn 4mo ago
  I'm a happy user of android with animations turned off. It's the only mean to make it somewhat "snappy". IMHO lag is always worse than lack of fancy transient state in input -> UI change context.
naet 4mo ago
I think it's not uncommon for good animations to cheat a bit while in motion, rather than look perfect on every frame. Like how cartoons can use smear frames that look bizarre when paused at the wrong time but when viewed as part of a larger animation help sell the motion visually.
- DavidVoid 4mo ago
  The game Overwatch is a pretty great contemporary example of this [1]. It has some excellent fluid animations, which look really weird if you freeze frame them. [1]: https://youtu.be/vIdeGmN__Pw?t=550 https://youtu.be/vIdeGmN__Pw?t=550
- ryukoposting 4mo ago
  I don't think this analogy works because the blur frames look good in motion, and the frames in the blog post look terrible in motion. The animation in the first example is so bad that the first time I watched it I thought there was going to be three buttons at the top at the end, and it was weird and disorienting to realize there was only two.
- akersten 4mo ago
  Yeah the difference is that the blur frames are deliberate and purposeful for the overall effect. The animations showcased here are accidental jank that reveal a clobbered together unpolished app.
- sanjit 4mo ago
  Agreed! With MacOS I felt there was a major quality change for visual quality & animations when SwiftUI was used BY Apple for the OS and applications. I'm not a developer, but it felt there were areas where an icon or window just didn't visually work the way it used to or SHOULD in placement or animation. The hackish-ness hasn't changed over time: there are so many examples throughout the OS/Applications that I want to say "it was always like that", except it wasn't: Apple set the bar and it was high, the quality was exceptional. I feel there are a lot of hacks going on with SwiftUI to achieve the same UI placement or animation. Last quick note I think about often: a lot of analog creation was really hard. It still is. When it comes to digital we've been thinking we'll come back to things later, but never do... we build more bad on top of bad... sadly.
arjie 4mo ago
Negative examples are cool. Time consuming to put together. I did appreciate that. What are some positive examples?
- flyingshelf 4mo ago
  Positive examples are all other animations that do work well, or are just animated in After Effects, for which there are plenty of examples online already, like on Twitter.
hk__2 4mo ago
> The rule of thumb is: If I take a screenshot of your app at any moment, it must make sense After reading this blog post, I think the rule of thumb should be "If I take a screenshot of your app at any moment (except during animations), it must make sense". I don’t think making sense during an animation should really be a goal, as long as it makes sense before and after.
- embedding-shape 4mo ago
  It's like you read until that point, but then didn't read the justification for why it makes sense to care about frames during the animation, the author does outline a bunch of reasons why it should make sense during the entire thing. Maybe I've just spent too many years as a pixel-perfect chasing frontend developer, but things can look very janky if they jump out of place during animations, compared to where they are before/after.
  - hk__2 4mo ago
    > It's like you read until that point, but then didn't read the justification My comment starts with "After reading this blog post"; of course I read it, but it left me totally unconvinced, especially because the author doesn’t bother showing good examples: he criticizes these and then leave you with a random raccoon animation and that’s all. For example, I don’t understand what’s wrong with the Youtube animation; it looks perfectly fine to me.
- motoroco 4mo ago
  I first heard something similar taking motion design classes in art school: every frame should look good. Transitions and animations that have bad in-betweens look bad overall
- montroser 4mo ago
  Well, this is the exact opposite of his point. Of course it should make sense when not animating! That is given. The entire crux of his point is that it should also make during an animation. In an ideal world, it is hard to argue with. Yes, sure it should make sense. But also, please don't spend precious cycles on this unless all the other bugs are fixed, and this animation consistency is truly the most important remaining issue to address.
singiamtel 4mo ago
This blog makes me appreciate my browser's reading mode
vthommeret 4mo ago
[dead]
mawadev 4mo ago
Feels like UI elements have a lot of abstractions that are not perfect for motions. With every hack you work around the layout engine that gives you this simplicity of defining layouts. Some libraries allow you to define keyframes for the motions in between, but it still isn't perfect, especially if you look at the youtube sample where one element overlaps the other and the animation would take up too much time or look odd if this wasn't the case. Even if you perfect all of this, would you really want to spend more processing power and script weight on these aspects? I feel like most UIs have severe latency issues out of the box, anything that doesn't address the elephant in the room adds insult to injury.
fasterik 4mo ago
I agree that some of the examples the author provided are instances of bad animation. But I don't agree with the premise of the article. Computer graphics is all about exploiting features of the human visual system. We perceive things differently when they're moving vs. when they're standing still. It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. We can also pick apart screenshots but these don't capture everything about how the user perceives a display in real-world lighting conditions. I would draw an analogy to film. A fast tracking shot might look bad on individual frames because of motion blur. A wide-angle shot might make some objects look "wrong" because of optical distortion. But these are still the right choice if they have the intended artistic effect in the theater.
- voidnap 4mo ago
  What do you think the premise of the article is? The article is pretty narrowly speaking of "app" UI and your comment is a "well actually" that some videos intentionally introduce noise or temporary discomfort for an emotional or artistic effect. On the same basis, comments like yours would defend screen shake if it was added to desktop and mobile apps on every user input.
  - fasterik 4mo ago
    The premise of the article is that every frame of an animation should look good if captured and analyzed statically, in isolation. There's no reason provided for this other than "it feels right." I'm saying that this ignores how the human visual system works and how we perceive displays in real-world lighting conditions. I used film as an analogy to illustrate the point. The idea that I would defend screen shake is a complete straw man. How do you get from my comment to that conclusion?
    - voidnap 4mo ago
      > every frame of an animation should look good if captured and analyzed statically, in isolation This is just true though. It isn't the only thing that matters but if you are creating a game or a video sometimes you do capture things frame by frame to understand why something looks off when animated. Your film thing isn't an analogy, you are trying to say film is an example where some frames have motion blur so they don't look good, but since that's okay in film, it should be okay in software and apps. The word "good" is being overloaded to mean different things in each example. Screen shake in a video game or chromatic abberation in a film can be good in those contexts because they are the intent of the artistic direction. Maybe if you are hung up on the word "good" replace it with "appropriate" or "intentional".
Animats 4mo ago
Now I have to get Ubuntu/Wayland/winit/wgpu/rend3/egui/wine to work.
ylisav 4mo ago
What a rare creature, an article without AI mentioned in it! Thanks for sharing
genxy 4mo ago
The title reminds me of The Simpsons, watch an episode and pause it. Unlike live action, every frame of The Simpsons is art. It is almost unbearable to internalize the sheer volume of purposely constructed images that The Simpsons is sending at you. Gluttonous in scale.
namuol 4mo ago
Would be nice if there were some _positive_ examples to go along with all of the negative ones. All I’m really getting from this is that I should avoid animations, which I don’t think is what the author is actually trying to say.
- akersten 4mo ago
  > All I’m really getting from this is that I should avoid animations Wouldn't be the worst takeaway from the article. You should avoid animation for animation's sake in general. Imagine if we animated letters flying up from your phone's keyboard into the text field as you type them for example.
  - tosti 4mo ago
    I think it would be hilarious if you'd combine that with the clacking sound of a typewriter.
  - imathew 4mo ago
    As a user of software I find myself disabling most transition animations when the OS or application supports it, desktop, mobile and web. Very rarely I find myself turning something back on - either it's actually useful in the situation, or it's done so well that it's pleasant even to an old like me.
  - namuol 4mo ago
    Most of the animation examples in the article are there to communicate transitions in the UI (eg the movement of a UI element). Functional animations are genuinely a good practice from an accessibility standpoint and not just flourish. It’s just hard to do well.
Topfi 4mo ago
Great article, the worst offender is compact tab mode in the current Safari. The animations they implemented make that unusable, sometimes it’ll move tabs away from where the tab was when clicking, the animation always look clunky and the entire experience feels utterly untested. Doesn’t just look poor, but violates quite a lot of HIG rules Apple recommends for third party devs. Maybe something to focus on in a part two of this article.
notglossy 4mo ago
Animation should convey meaning, not achieve pixel-perfect morphs between states. When iOS first launched, some of the brilliance was in how UI elements transformed into one another—a title in the title bar becoming a "back" button on the left, for instance. There were no intricate morphs, just a simple cross-dissolve between two elements shown briefly at the same time. It read as meaningful without being literal. The Crop/Adjust example doesn't hold up here, because the two modes don't share a focus. The crop animation is deliberately different: it emphasizes the cropping controls at the edges of the image that you might otherwise miss, prepping you visually for the task and tying the controls into the image workspace. Adjust mode has no direct controls on the image itself, so the transition out should differ. The mismatch is the point, not a flaw. For most UI, you don't need pixel-perfect morphs between small elements. The real job of animation and behavior is to convey meaning and context. Make your transitions pixel-perfect and most people would never notice the difference.
beeb 4mo ago
All I can think seeing those examples is how macOS went from beautiful to utterly jank in the last 10 years.
SarthakGaud 4mo ago
New Principle and I love it, however its hard to do on move dynamic and populated sites like youtube. Gonna follow this from my next project.
- ezst 4mo ago
  Re: YouTube example, the issue (as I understand it, and I'm what you could describe as the opposite of an expert in that) is that the video and the playlist blend with transparency over one another. Had the playlist appeared sliding from the right side of the screen, it would have worked (I guess).
  - SarthakGaud 4mo ago
    yes what you described is how it is right now on youtube, the main reason is to make it look more fluid and natural, apple examples shown mostly work because the overall structure is very static and have a lot of negative spacing. More animations tend to negate the principle described if not done with extreme care.
paytonjjones 4mo ago
From a game broadly considered to have industry-best animations: https://imgur.com/gallery/donkey-kong-super-smash-bros-ultimate-bjyzLxc https://imgur.com/gallery/donkey-kong-super-smash-bros-ultim...
- the_af 4mo ago
  What's the imperfection? The eyes are standard (and deliberate) cartoon animation. Or is there something else I missed?
- bschwindHN 4mo ago
  The DK games have used that eye popping animation since at least the SNES Donkey Kong Country games.
eqvinox 4mo ago
The application of "every frame perfect" to the mouse pointer ranges from neutral to actively harmful. It causes roughly 1 frame of delay, which can be enough to bump the display-eye-hand-mouse loop out of whack (this seems to be different from person to person). It also causes pointer stutter when the system is under load side the pointer can't be independently updated.
- silon42 4mo ago
  +1... every frame perfect is less important than lag (ie something should happen at next frame after user action). Pointer should be async with the rest of desktop anyway, unless the system is broken.
NetOpWibby 4mo ago
Thanks, I hate it.
mwkaufma 4mo ago
The thing about UI animation is that even if no tween frame was ever hinky I'd still turn it off because it's an anti-pattern. It's there to look good on a retail shelf, not to improve day to day usage.
seemack 4mo ago
I've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them. For anyone curious, https://www.thisischris.dev/projects/project-6/ https://www.thisischris.dev/projects/project-6/
- Tyr42 4mo ago
  Ty but the animations don't seem to animate on mobile chrome on Android.
  - seemack 4mo ago
    Appreciate heads-up! I just checked Chrome on my Android device and it's all working fine for me. I don't know if I set the page up weirdly but I have to refresh the page sometimes for the videos to show up.
- archagon 4mo ago
  Great article! We’ve become so accustomed to UI jank these days…
iknowstuff 4mo ago
This is begging for someone to spin up Mac OS X Tiger or Snow Leopard and compare! I recall their butter smooth rollout animations looking pixel perfect
- kridsdale3 4mo ago
  I suspect the specific versions you call out were in that time period for a reason. Snow Leopard was the first to integrate iOS's CoreAnimation framework. Nearly all animations now are based on that. Before, the CPU manually updated the sizes and positions of things, frame by frame, in a loop. This is how you'd program a Game Engine. After, with CA, state-change property models are sent to a different process entirely which does its own interpolation to animate the UI at a higher thread-priority than any other process in the operating system. This is fantastic if maintaining 60+ FPS at all times, even on an iPhone 1 or 3G with less power than you'd have in today's AirPod chips, was a central requirement. (And it was, the first iPhones dominated their competitors in terms of input latency and framerate) But programming CoreAnimation is much more complicated and easy to make mistakes in if you want "every frame perfect". Trust me, I made a lot of the animations that shipped in iOS 7 (the Calendar app is full of them, OS level transitions for the core chome elements of iOS). It took nearly a year of meticulousness to get things looking ok. In the years since I left the company, I've noticed these transitions get more and more janky and buggy and full of artifacts. Clearly, whoever replaced me doesn't have the same eye and sense of craft. Oh well.
  - iknowstuff 4mo ago
    I love you. Thanks for chiming in!
ptx 4mo ago
The KDE start menu has always annoyed me (well, since whenever they switched from the Windows 95 inspired one to the XP or Vista inspired one) for this reason. When you switch views, the view switches immediately (which is good) but the indicator animates slowly from one state to the other. The result is that the indicator is not really indicating what it's supposed to (since it's out of sync with the view): It's indicating the old view when I'm already in the new one, and then it's indicating something between the old and new views, when clearly I'm not between views at all. So it's completely wrong for the entire animation until it finishes.
samat 4mo ago
Steve Jobs would have fired a lot of people for this :)
huflungdung 4mo ago
[dead]
designerarvid 4mo ago
Dragning downwards on the iPhone Home Screen to search is a perfect example, the gradual blur animation is never auto playing once activated. Instead, it responds to your drag and you are always in control.
m132 4mo ago
I still have Sonoma on some of my devices. All I can say is: wow, steady regress. The save dialog, albeit a little shakey, is nowhere as chaotic as in your example. The buttons in Notes move between panes in a perfect seamless manner. Albeit the animation occasionally glitches out when you repeatedly focus and deselect the Safari bar, the cursor is perfectly timed with the text, only fading in after the text is done moving to the left. The Preview bug must be something recent too, I can't reproduce this. https://streamable.com/kx7op6 https://streamable.com/kx7op6 I miss it when companies like Apple, Sony, and IBM paid attention to the smallest details. Apple in particular earned its current valuation with the iPhone, an all-touch device that did nothing extraordinary compared to Windows Mobile and Symbian PDAs of the time (and was in fact functionally lagging behind compared, failing to even match the then-contemporary feature phones in some areas) BUT one that you didn't actually want to smash against a wall after a few minutes of use. Now these animations are bringing back exactly the Windows Mobile and Symbian vibes. Remember how happy Steve used to be with OS X animations? He would replay them on stage multiple times, in slow motion. These though, these would have the people behind them face the fate of the iPhone 4 antenna man.
- inatreecrown2 4mo ago
  The animations in your short video do in fact look more orderly and less chaotic. Could it be that Apple was using AppKit in Sonoma and switched to SwiftUI now?
- vostrocity 4mo ago
  A lot of these animation regressions in Apple's UI originated from iOS 7 and the move away from skeuomorphism. The move away from skeuomorphism made it acceptable for UI elements to do things that make no sense. Examples: 1. https://photos5.appleinsider.com/archive/13.06.15-Homescreen.jpg https://photos5.appleinsider.com/archive/13.06.15-Homescreen... The status bar is unreadable on in-between frames, whereas in iOS 6 there was no such problem. 2. https://youtu.be/XawiZc8qmWA?si=vqT-JEYf0NDp8I9o&t=461 https://youtu.be/XawiZc8qmWA?si=vqT-JEYf0NDp8I9o&t=461 Play it at 0.25x and notice the app opening animation. In iOS 6, the status bar is never unreadable for a single frame. In iOS 7, the status bar is first obstructed by home screen icons animating under it, then obstructed by the dock animating over it, and finally it fades away while a new status bar is drawn on the app that is being opened. It irks me to no end that iOS handles the status bar this way to this day. In the app switcher, every app card is drawn with a blank area at the top [1] where the status bar would go, when really the status bar should be permanently at the top and the app card should not include space for the status bar (webOS figured it out before iOS 7 [2]). 1. https://imgur.com/a/Qj6DGus https://imgur.com/a/Qj6DGus 2. https://imgur.com/a/bM8OWZc https://imgur.com/a/bM8OWZc
glitchc 4mo ago
We do not perceive the world as a series of still frames. Any UI forcing that upon us is unnatural and will break immersion in subtle and unexpected ways. Apple and macOS may have their faults but the UI design is head and shoulders above anything the Wayland team has produced to date.
throwaway613746 4mo ago
[dead]
Svoka 4mo ago
Bold words for the site which makes my eyes bleed.
- ejflick 4mo ago
  Articles from this site pop up occasionally. Something about the background color causes me to see a medium-sized bright spot in my vision after a few minutes. Due to this, I have to remind myself not to click when I see the URL.
dagmx 4mo ago
I have a lot of thoughts about this: I think this is a weakly presented argument. The article doesn’t actually present stronger alternatives or even why anything shown is negative to the user. It might be negative but otherwise this is the same vacant critique that is levied by pointing at smear frame or transitional points in media to critique it. The user also has an untenable maxim. Every frame must make sense? I would posit this is impossible, or I’d ask the author how they’d handle window resizing while keeping every frame perfect. I also think the author themself finds it easier to point out flawed frames (again without actually explaining why they’re issues) than doing as they say. Tap the header links on their blog and see the animations play after the click is complete. Or go see their own UI projects and see how text and objects don’t stay within their containers. Surely someone saying that this is a tenet that should be followed could demonstrate it themselves. I think this is just a very hollow critique on their end. A more competently written article would have focused on why anything shown is bad for the end user, and how they might handle it instead. A good critique should actually include some substance and point to more than just the what, but the why and how.
- Normal_gaussian 4mo ago
  I think your critique is actually the hollowest thing here. The article is presenting an idea, not a solution. You've failed to see this and have constructed several strawman arguments in order to critique it. Most importantly the article does not present itself in a definite sense - it is written with care to say "I think", "Next thought:", "Probably", "So yeah.". This article is a person sharing what they are thinking, and unlike many of my thoughts - it is a fairly complete thought which is clearly sparking many other reasonable people to think along similar lines. The author doesn't present the solution - but there is no reason they should have to. What an odd and unreasonable bar you set. I also don't find your attacks on the authors site particularly endearing. The taste gap is well known, and punishing someone for their conceptual contribution outstripping their practical skill is quite... distasteful. A more competently written critique would have been more charitable and in the spirit of this community.
  - dagmx 4mo ago
ilsubyeega 4mo ago
Curious is there most efficient&precise(SOTA?) way to create animations/transitions(like theorem), I've written some of these and really hard to figure and fix out(e.g like the zoom animation from last section of page).
jiggawatts 4mo ago
A really infuriating example of this is the Windows Photos app (or whatever it is called this month) where scrolling through a photo album will show every image jumping around as it first shows them at some arbitrary scale, and then fits them to the window. Lazy, lazy development. "Job done, boss! Ready to ship to... checks notes... 3 billion users!" "Did you test it?" "Test? I thought we had a QA department!" "Nah, we fired all of them a decade ago. You're the QA now."
hexasquid 4mo ago
I scrolled the article and there were frames during the scroll where half a line of text was clipped by the start and bottom of the viewport.
LocalH 4mo ago
I don't want animation in my UI at all. I'd much rather have hard cuts between states, as it used to be. Wasting processing cycles making things look pretty yet it almost always results in a worse situation for the user.
deepsun 4mo ago
I couldn't understand author's point, because they haven't provided the right way to do each thing, their opinion. It's easy to criticize.
bigtones 4mo ago
The entire premise of this article is wrong and derived from a misquote. Kristian Høgsberg, in Wayland stated his goal was a system in which "every frame is perfect, by which I mean that applications will be able to control the rendering enough that we'll never see tearing, lag, redrawing or flicker." It had nothing to do with "if I take a screenshot of your app at any moment, it must make sense." As others here have pointed out - this entire article is very poorly conceived.
- akersten 4mo ago
  Misquote or not, the article is bang on and I think a better interpretation of that sequence of words anyway.
- eviks 4mo ago
  The entire premise of your comment is wrong and derived from not understanding this quote of the author: > Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.
rayiner 4mo ago
Excellent article. The examples from Mac OS Tahoe show how sloppy the work is. Just lazy shit done without attention and care. Steve Jobs would have fired a bunch of people. And this stuff matters: > This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings. The animations in iOS 26 and MacOS Tahoe feel wrong. Almost like an uncanny valley. It makes the UI unpleasant to use.
initramfs 4mo ago
note to self: run Wayland without systemd: https://news.ycombinator.com/item?id=34977129 https://news.ycombinator.com/item?id=34977129
dgudkov 4mo ago
Never use animation just for the sake of it. This article would not have existed had software designers stuck to this rule. All examples in the article use completely unnecessary animation.
ookblah 4mo ago
i actually like that the crop snaps after the fact, it reminds me that the crop is in fact active, same with rubber-banding type stuff.
jrm4 4mo ago
This silly pretentiousness goes a long way to explain why it took so long for Wayland to even be usable. I get that this is the way of the world, but I still think we'd have been be better off with, you know, real attention paid to classic free/open source ideas (like not breaking backward compatibility.)
jauntywundrkind 4mo ago
It feels like this could get significantly worse with Apple introducing folding devices. There's already a good number of iOS form factors that need to be supported, and now you need to be able to transition between form factors too. It feels like the ability to carefully handcraft nice interfaces is going down, as combinations go up. https://news.ycombinator.com/item?id=48461226 https://news.ycombinator.com/item?id=48461226 https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-folding/ https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-fold...
iamcalledrob 4mo ago
The root cause of this stuff, from experience, is that animations are hard to retro-fit after the fact. It's a lack of planning. The UI code needs to be structured with animation in mind, with hooks in the right places. And to do that, you need to know what is likely to be animated together. But what ends up happening is you encapsulated a few of the moving pieces in abstractions (e.g. "toolbar", "sidebar"), but you want to animate stuff within. You end up copy+pasting animation logic inside each (now leaky) abstraction and duct taping it all together. UI abstractions are hard! (Yes, on apple platforms there are transition blocks which will capture changes to the entire view hierarchy, but then the battle becomes preventing animations on stuff that shouldn't change!)
misiek08 4mo ago
I think it’s Apple motto since 2011: „Never care about quality again”. I still can't believe Rosetta was delivered and works like that.
liendolucas 4mo ago
One thing I will never understand is why do me need to have animations at all? There is zero value on them. Worse I'm inclined to believe that they introduce a nasty amount of bugs and they also need to be maintained.
- mike_hock 4mo ago
  Good animations do a lot for how the app feels. Like all code, they need to be kept in sync when related parts of the code change, of course, so yes, they're a non-zero development and maintenance burden. So what I don't get is the need to have half-assed animations in a half-assed app. You can add them once everything else is perfect.
- latexr 4mo ago
  Animations give you clues as to what is happening and how to undo it. A great example is the macOS “genie effect” when minimising windows. A first time user who clicked the minimise button on a window and saw it simply disappear would be lost as to where it went or how to get it back. Even as it appeared on the Dock, the lack of animation there as well could be imperceptible or the user might be unable to see what changed. By having a clear animation which indicates where the window is being moved to, it’s obvious where the window went and thus how to recover it.
dsego 4mo ago
The last one is such an obvious bug when the animation scales the canvas but does not translate the origin to compensate at the same time.
ErneX 4mo ago
Fully agree with OP, bad animations are jarring.
rkourdis 4mo ago
I've been learning a bit of Swift / SwiftUI recently while building a macOS app and this seems to be a problem all the way down the tech stack, even for simple apps. While it's been surprisingly easy to animate things, I've spent way too long trying to synchronize the movement of different components, to make sure things don't jump around, etc. Window content snaps to size while the borders animate, the shadow doesn't refresh alongside the borders, that sort of thing. Maybe I'm missing something in terms of how I should set up my code, or maybe it's a hard problem to solve automagically in a framework. In some cases I basically gave up on slow animations (which make the issues obvious) and rely on fast movement to hide the imperfections - but it creates a less polished feeling as the article points out.
hmokiguess 4mo ago
Can we get Apple to employ Niki and have him lead design please
kstenerud 4mo ago
Or, just stop using so many animations. In most UIs, it feels like they're animated for the sake of being animated. Very rarely do I say "Ah, I'm glad that was animated, because the transition would be confusing otherwise." Things like this are part of the reason why operating systems that used to measure in the tens of megabytes now measure in the tens of gigabytes, and require chips 1000x more powerful in order to MAYBE reach the same level of snappiness (although usually not).
jader201 4mo ago
As great as the spirit of this article is, it only offers problems without solutions. I’d love to see example of “bad” solutions made “good”. As a result, I feel like solving this problem is easier said than done. I can’t think of a great way to solve many of the problems presented here. (Admittedly, I’m not a UX designer, so the bar is low for me.)
wiseowise 4mo ago
But Niki, nobody cares about animations! Apparently caring about details is labeled "OCD" now, and "just make it good enough, we'll fix this later".
liampulles 4mo ago
Most stupid animations I have seen introduced to UIs are done because they are stupidly effective at impressing business stakeholders, especially non-technical ones. It never fails to astound me how some people will fawn over "delightful" transitions. I guess I can understand it in the sense that it is an easy thing to help communicate the perception of high quality to the broader business.
plastic041 4mo ago
People should know that most of the Mac examples shown in the article are regressions that happened in Tahoe. - Sequoia's Notes had perfect sliding animation. - Safari's URL bar seemed the same. (Though I think it's more a placement issue, not animation issue. They could just put a placeholder at the end of the bar, not at the center.) - 'Save as' dialog had a problems with sidebar, but not janky as much as Tahoe's. - Zooming in preview app worked fine.
Centigonal 4mo ago
I don't know if I agree with this, especially in the context of animation: https://www.bloopanimation.com/the-art-of-smear-frames/ https://www.bloopanimation.com/the-art-of-smear-frames/
maxjackson92 4mo ago
[dead]
nedt 4mo ago
I still remember that you could slow down animations in OS X - I think with the shift key. Steve Jobs even did it in presentations because they looked so gorgeous in slowmo. If we‘d still have that I‘m sure they would care more about that every frame.
projektfu 4mo ago
Bad things: - An animation that prevents the next thing for enough milliseconds that it causes input loss. Example - the iPhone calculator that wouldn't accept the next digit until the last press was done animating. - Animation that moves active elements like buttons out of or into the way as you are clicking/tapping, causing an errant click. - A lack of animation or visible context change that causes you to not realize the screen has changed. This sometimes gets me when I click another section or chapter in some kind of two-pane interface and the other side updates at a random time. - Animations that take so long that you can't work at the speed of your hand/eye/brain coordination. - Animations that feel like you're trapped in a liminal space until they're finished, which I think is basically the subject of the article. Better things: - Coordinated animations that accentuate updates, especially when you didn't request them. Reordering a leaderboard, adding a new item in the middle of a list from a distant update, etc. - Animations that cover for slow processes. If we expect a while (but not too long) before a request and a response, an animation can be better than a spinner or nothing at all. It might help prevent the rapid clicking that some users do. I prefer if it doesn't spend a whole second when the response comes back in a tenth of a second. - Stylistic animations that don't affect how you work. The genie effect and the bouncing app animation of old Mac OS X come to mind. A key feature is that you usually can turn them off.
GuB-42 4mo ago
Animation is all about trickery, especially real time animation where you have a performance budget, like in video games. You can reveal the trick by doing frame by frame, or other techniques, but it matters less than the overall feel. It is more of an art form than an exact science. Often the animation itself is the trick. The backend is too slow to deliver data in time, so you start some animation to hide the latency. If you make a screen capture during that time, of course you won't see the data because it is not there yet, that's the trick. Ideally, the back end should keep up, this way, you don't even need an animation, but sometimes, you have to make do with what you have.

869 points by ravenical 4mo ago

This is the kind of things that bother me when using software and unfortunately almost every software is affected. I just look at the largest tech companies in the world that with their unlimited finances cannot produce software that isn't glitchy like this.

hankbond 4mo ago

This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.

jastanton 4mo ago
Or if the author mocked out what each of the bad examples should look like if done properly.
seemack 4mo ago
I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made. If you're curious, you can see it here: https://www.thisischris.dev/projects/project-6/ https://www.thisischris.dev/projects/project-6/
- akersten 4mo ago
  Thanks for highlighting the "one element cross fades into a totally different one" example. That particular type of animation really makes an app feel ungrounded and unreliable to me, it gives a sense that the UI elements aren't really tied closely to the data and are just barely existing. And somehow I see it all the time across tons of apps. The improved versions where the elements actually transform into each other, sharing the same visual real estate, is so much better.
  - seemack 4mo ago
    Ty for the kind words! I completely agree with you too. Compose added a Crossfade modifier that makes it super easy to apply the animation to a content switch but it's often applied in the lazy way you mentioned.

ikesau 4mo ago

I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like. At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts) I think many of these transitions are unnecessary and would feel just as good if they snapped immediately with instantaneous reflow.

tsunamifury 4mo ago
Motion is critical for reorientation after transition. Often with out it your brain has to rescan the entire page on each refresh.
- geokon 4mo ago
  Do you have some concrete examples? "Back-in-the-days" you'd click and stuff would instantly happen, and I don't remember anything being more difficult to visually interpret. On my Kubuntu desktop if I disable all animations (the whole compositor) I don't feel there is an increased cognitive load of rescaning things - but maybe it's my preexisting memory of the UIs and certain baked in UI expectations. Maybe this animated stuff helps people that are computer illiterate? (software made for the lowest common denominator)
  - billyp-rva 4mo ago
    Consider trying to follow along with this app [0] without the transitions. Without them you'd experience much more cognitive load to staying oriented. [0] https://app.ilograph.com/demo.ilograph.Ilograph/Request https://app.ilograph.com/demo.ilograph.Ilograph/Request
    - jstanley 4mo ago
      I think this is actually a perfect example. The animations make it more complicated to follow, not less! If it just highlighted the stuff you were hovered over it would be easy to understand, I honestly don't get the motivation behind the animation.

boredatoms 4mo ago

This explains why I feel compelled to turn off any animation whenever there is a toggle to do so

renox 4mo ago

Bah, each time someone say this they "forgot" that one side effect of 'every frame is perfect' is that it can increase latency.. Perfection or latency? That should be the user's choice not the developer's..

sam1r 4mo ago

I feel like OP brought up a good problem to solve, with no solution. I dream of the days where posts like these end with "5 ways to better execute on this today". Instead, we get a zooming in/out raccoon (making fun of the reader, IMO) for recognizing this problem via the OP author. Maybe it's just a really hard problem to solve across all devices & latencies... Perhaps more time needs spent on "problem solving" vs "problem description".

keane 4mo ago
The expectations set for what turns out to be an article without solutions are also raised by the title the author chose. Show us these mythical perfect frames?

vlovich123 4mo ago

It would have been compelling to describe / show what it should have looked like. Because the only alternative for some of these would just be sharp jumps instead of any animation - animating simultaneous appearance and transition of information will inherently result in frames that look imperfect.

mrob 4mo ago

I'd rather have an imperfect frame now than a perfect frame later. Latency should be the top priority for any UI, because when latency is low enough it feels like a part of your own body, which minimizes cognitive load. Animation is especially bad for this, because animations add hundreds of milliseconds of latency.

inigyou 4mo ago
You might have thought the title was about Wayland and you're right. But this isn't about Wayland.
cloogshicer 4mo ago
I think that's a false dichotomy. The examples the author gives would not be slower in any way if done correctly.
- chaboud 4mo ago
  However, the author makes these assertions: - No partially loaded content. - No relayout while content loads. Holding those as hard rules leads to delay or rejection. Instead, while I agree it's better to have everything up front, gracefully handling cases when we don't is important, and some degree of responsiveness, even with partially loaded content, often makes for a better experience for the user than a delay. Just be up front about it and find ways to keep continuity of relationship and smoothness. Diffeomorphic mappings are your friend...
  - true_religion 4mo ago
    I saw that but couldn’t really connect it to the rest of the article because none of their examples had data loading. Like the issue with the osx side bar transition is that the order of operations makes no sense. When expanding, it makes the buttons vanish only to animate their reappearance from nothing once a panel slides over them. It would make sense in the physical world if the panel occluded the buttons during transition. During closing, the reverse problem happens. The buttons aren’t occluded but clip through the panel like it became water. It happens fast but not so fast that you can’t see it, and there is an unnecessary distortion. In today’s world of AI, good taste is all we human workers have so we should call out cut corners.

jadar 4mo ago

I think a lot of these are because Apple has built animations into their products as first-class citizens, but that means that they need to somehow figure out how to compose them well. (Which obviously is a rather difficult problem to solve!) In my experience, you end up spending a lot more time trying to get all of the animations to work well together than you do on creating the actual UI, and that time is just not worth it if your start and end states are beautiful and intuitive. There's also the cross-UI-framework tax that has come up since Apple has allowed mixing SwiftUI and (App|UI)Kit, and animations are part of that.

ezst 4mo ago
I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times". Old Apple knew not to overdo things.

skybrian 4mo ago

These seem like low-priority bugs to spend time on? Most apps have bigger problems.

ChrisLTD 4mo ago
These aren’t bugs in the traditional sense. They built the animation system to work like this, and replaced the old system that didn’t produce these psychedelic transition states.
- skybrian 4mo ago
  Is there more about what they did somewhere else? I don’t see any implementation details in the article.
layer8 4mo ago
The issue is that we didn’t have these kinds of incongruent animations twenty years ago, and nowadays they are the norm, worsening user experience.
deleted 4mo ago
[deleted]

mbostock 4mo ago

There’s a similar principle of congruence in information visualization, stated in Animated Transitions in Statistical Data Graphics by Heer & Robertson as: “Maintain valid data graphics during transitions. To ensure viewers’ mental models are congruent with the semantics of the data, we suggest that, as much as possible, intermediate interpolation states remain valid data graphics.” https://idl.uw.edu/papers/animated-transitions https://idl.uw.edu/papers/animated-transitions

throwaw12 4mo ago

I would love to understand these people, really! On a personal level, if thing works - I say, cool, lets focus on something else now. But I have worked with people who are similar to the author and we will get into the conversation: - they: wait, but the bundle size is 2.4Mb, it can be improved a lot - me: by how much? and we have 10k users/day and we have cache policy setup - they: we can reduce it to 1Mb, imagine saving 10k*1.4Mb every day - me: yeah, but its not costing us much, if you focus on making it perfect your salary will cost us 2 years of outbound traffic cost. - they: no, but its not perfect I admire those people, because they're valuable asset in some companies (e.g. Google scale, saving 1.4Mb for 1 Billion people every day is a lot), but my mind doesn't even want to think about what's perfect. How do I get there? What are the resources I can read and learn from to look at things to make them perfect?

piskov 4mo ago
Broken windows theory The issue with “premature optimization is bad” is that some see it as a permission to not optimize at all. Hence you eventually end up with a system where everything is bad. — Although for some of us being obsessive-compulsive weirdos this is the only way of life: an itch that keeps on physically scratching until resolved. “Be guided by beauty. I really mean that. Pretty much everything I’ve done has had an aesthetic component, at least to me. Now you might think ‘well, building a company that’s trading bonds, what’s so aesthetic about that?’ But, what’s aesthetic about it is doing it right. Getting the right kind of people, and approaching the problem, and doing it right […] it’s a beautiful thing to do something right.”
- throwaw12 4mo ago
  > Broken windows theory Absolutely, but on the other hand businesses operate with lots of broken windows as well, and they are fine with it. Dilemma I am having is, on one side, business needs my best judgement for today and short term, because this is how most businesses survive, on the other hand, on a personal level I feel like I am stuck making non-perfect decisions, hence I can't even think about perfect world, because I am not training that part of my brain.

satvikpendem 4mo ago

An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place. I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.

yellow_lead 4mo ago
Not for me, I always turn off animations. It feels fine for me, and I can operate the phone a lot quicker without having to wait for animations to complete.
- intrikate 4mo ago
  I don't turn them off entirely, I kind of enjoy the feeling of momentum animated elements can provide, but I definitely do go in and speed them up massively. I find that when a phone is feeling unresponsive or sluggish, it's usually because I'm moving two steps ahead of the animation and it has to catch up. Feels like tripping on your own feet.
ivanjermakov 4mo ago
Give it one day and you won't come back to those sluggish animations slowing your intent down.
- satvikpendem 4mo ago
  I have it at 0.5x. 0x is just not smooth enough, plus sometimes apps actually don't load fast enough so you're stuck waiting for them anyway.
bvrmn 4mo ago
I'm a happy user of android with animations turned off. It's the only mean to make it somewhat "snappy". IMHO lag is always worse than lack of fancy transient state in input -> UI change context.

naet 4mo ago

I think it's not uncommon for good animations to cheat a bit while in motion, rather than look perfect on every frame. Like how cartoons can use smear frames that look bizarre when paused at the wrong time but when viewed as part of a larger animation help sell the motion visually.

DavidVoid 4mo ago
The game Overwatch is a pretty great contemporary example of this [1]. It has some excellent fluid animations, which look really weird if you freeze frame them. [1]: https://youtu.be/vIdeGmN__Pw?t=550 https://youtu.be/vIdeGmN__Pw?t=550
ryukoposting 4mo ago
I don't think this analogy works because the blur frames look good in motion, and the frames in the blog post look terrible in motion. The animation in the first example is so bad that the first time I watched it I thought there was going to be three buttons at the top at the end, and it was weird and disorienting to realize there was only two.
akersten 4mo ago
Yeah the difference is that the blur frames are deliberate and purposeful for the overall effect. The animations showcased here are accidental jank that reveal a clobbered together unpolished app.
sanjit 4mo ago
Agreed! With MacOS I felt there was a major quality change for visual quality & animations when SwiftUI was used BY Apple for the OS and applications. I'm not a developer, but it felt there were areas where an icon or window just didn't visually work the way it used to or SHOULD in placement or animation. The hackish-ness hasn't changed over time: there are so many examples throughout the OS/Applications that I want to say "it was always like that", except it wasn't: Apple set the bar and it was high, the quality was exceptional. I feel there are a lot of hacks going on with SwiftUI to achieve the same UI placement or animation. Last quick note I think about often: a lot of analog creation was really hard. It still is. When it comes to digital we've been thinking we'll come back to things later, but never do... we build more bad on top of bad... sadly.

arjie 4mo ago

Negative examples are cool. Time consuming to put together. I did appreciate that. What are some positive examples?

flyingshelf 4mo ago
Positive examples are all other animations that do work well, or are just animated in After Effects, for which there are plenty of examples online already, like on Twitter.

hk__2 4mo ago

> The rule of thumb is: If I take a screenshot of your app at any moment, it must make sense After reading this blog post, I think the rule of thumb should be "If I take a screenshot of your app at any moment (except during animations), it must make sense". I don’t think making sense during an animation should really be a goal, as long as it makes sense before and after.

embedding-shape 4mo ago
It's like you read until that point, but then didn't read the justification for why it makes sense to care about frames during the animation, the author does outline a bunch of reasons why it should make sense during the entire thing. Maybe I've just spent too many years as a pixel-perfect chasing frontend developer, but things can look very janky if they jump out of place during animations, compared to where they are before/after.
- hk__2 4mo ago
  > It's like you read until that point, but then didn't read the justification My comment starts with "After reading this blog post"; of course I read it, but it left me totally unconvinced, especially because the author doesn’t bother showing good examples: he criticizes these and then leave you with a random raccoon animation and that’s all. For example, I don’t understand what’s wrong with the Youtube animation; it looks perfectly fine to me.
motoroco 4mo ago
I first heard something similar taking motion design classes in art school: every frame should look good. Transitions and animations that have bad in-betweens look bad overall
montroser 4mo ago
Well, this is the exact opposite of his point. Of course it should make sense when not animating! That is given. The entire crux of his point is that it should also make during an animation. In an ideal world, it is hard to argue with. Yes, sure it should make sense. But also, please don't spend precious cycles on this unless all the other bugs are fixed, and this animation consistency is truly the most important remaining issue to address.

singiamtel 4mo ago

This blog makes me appreciate my browser's reading mode

vthommeret 4mo ago

[dead]

mawadev 4mo ago

Feels like UI elements have a lot of abstractions that are not perfect for motions. With every hack you work around the layout engine that gives you this simplicity of defining layouts. Some libraries allow you to define keyframes for the motions in between, but it still isn't perfect, especially if you look at the youtube sample where one element overlaps the other and the animation would take up too much time or look odd if this wasn't the case. Even if you perfect all of this, would you really want to spend more processing power and script weight on these aspects? I feel like most UIs have severe latency issues out of the box, anything that doesn't address the elephant in the room adds insult to injury.

fasterik 4mo ago

I agree that some of the examples the author provided are instances of bad animation. But I don't agree with the premise of the article. Computer graphics is all about exploiting features of the human visual system. We perceive things differently when they're moving vs. when they're standing still. It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. We can also pick apart screenshots but these don't capture everything about how the user perceives a display in real-world lighting conditions. I would draw an analogy to film. A fast tracking shot might look bad on individual frames because of motion blur. A wide-angle shot might make some objects look "wrong" because of optical distortion. But these are still the right choice if they have the intended artistic effect in the theater.

voidnap 4mo ago
What do you think the premise of the article is? The article is pretty narrowly speaking of "app" UI and your comment is a "well actually" that some videos intentionally introduce noise or temporary discomfort for an emotional or artistic effect. On the same basis, comments like yours would defend screen shake if it was added to desktop and mobile apps on every user input.
- fasterik 4mo ago
  The premise of the article is that every frame of an animation should look good if captured and analyzed statically, in isolation. There's no reason provided for this other than "it feels right." I'm saying that this ignores how the human visual system works and how we perceive displays in real-world lighting conditions. I used film as an analogy to illustrate the point. The idea that I would defend screen shake is a complete straw man. How do you get from my comment to that conclusion?
  - voidnap 4mo ago
    > every frame of an animation should look good if captured and analyzed statically, in isolation This is just true though. It isn't the only thing that matters but if you are creating a game or a video sometimes you do capture things frame by frame to understand why something looks off when animated. Your film thing isn't an analogy, you are trying to say film is an example where some frames have motion blur so they don't look good, but since that's okay in film, it should be okay in software and apps. The word "good" is being overloaded to mean different things in each example. Screen shake in a video game or chromatic abberation in a film can be good in those contexts because they are the intent of the artistic direction. Maybe if you are hung up on the word "good" replace it with "appropriate" or "intentional".

Animats 4mo ago

Now I have to get Ubuntu/Wayland/winit/wgpu/rend3/egui/wine to work.

ylisav 4mo ago

What a rare creature, an article without AI mentioned in it! Thanks for sharing

genxy 4mo ago

The title reminds me of The Simpsons, watch an episode and pause it. Unlike live action, every frame of The Simpsons is art. It is almost unbearable to internalize the sheer volume of purposely constructed images that The Simpsons is sending at you. Gluttonous in scale.

namuol 4mo ago

Would be nice if there were some _positive_ examples to go along with all of the negative ones. All I’m really getting from this is that I should avoid animations, which I don’t think is what the author is actually trying to say.

akersten 4mo ago
> All I’m really getting from this is that I should avoid animations Wouldn't be the worst takeaway from the article. You should avoid animation for animation's sake in general. Imagine if we animated letters flying up from your phone's keyboard into the text field as you type them for example.
- tosti 4mo ago
  I think it would be hilarious if you'd combine that with the clacking sound of a typewriter.
- imathew 4mo ago
  As a user of software I find myself disabling most transition animations when the OS or application supports it, desktop, mobile and web. Very rarely I find myself turning something back on - either it's actually useful in the situation, or it's done so well that it's pleasant even to an old like me.
- namuol 4mo ago
  Most of the animation examples in the article are there to communicate transitions in the UI (eg the movement of a UI element). Functional animations are genuinely a good practice from an accessibility standpoint and not just flourish. It’s just hard to do well.

Topfi 4mo ago

Great article, the worst offender is compact tab mode in the current Safari. The animations they implemented make that unusable, sometimes it’ll move tabs away from where the tab was when clicking, the animation always look clunky and the entire experience feels utterly untested. Doesn’t just look poor, but violates quite a lot of HIG rules Apple recommends for third party devs. Maybe something to focus on in a part two of this article.

notglossy 4mo ago

Animation should convey meaning, not achieve pixel-perfect morphs between states. When iOS first launched, some of the brilliance was in how UI elements transformed into one another—a title in the title bar becoming a "back" button on the left, for instance. There were no intricate morphs, just a simple cross-dissolve between two elements shown briefly at the same time. It read as meaningful without being literal. The Crop/Adjust example doesn't hold up here, because the two modes don't share a focus. The crop animation is deliberately different: it emphasizes the cropping controls at the edges of the image that you might otherwise miss, prepping you visually for the task and tying the controls into the image workspace. Adjust mode has no direct controls on the image itself, so the transition out should differ. The mismatch is the point, not a flaw. For most UI, you don't need pixel-perfect morphs between small elements. The real job of animation and behavior is to convey meaning and context. Make your transitions pixel-perfect and most people would never notice the difference.

beeb 4mo ago

All I can think seeing those examples is how macOS went from beautiful to utterly jank in the last 10 years.

SarthakGaud 4mo ago

New Principle and I love it, however its hard to do on move dynamic and populated sites like youtube. Gonna follow this from my next project.

ezst 4mo ago
Re: YouTube example, the issue (as I understand it, and I'm what you could describe as the opposite of an expert in that) is that the video and the playlist blend with transparency over one another. Had the playlist appeared sliding from the right side of the screen, it would have worked (I guess).
- SarthakGaud 4mo ago
  yes what you described is how it is right now on youtube, the main reason is to make it look more fluid and natural, apple examples shown mostly work because the overall structure is very static and have a lot of negative spacing. More animations tend to negate the principle described if not done with extreme care.

paytonjjones 4mo ago

From a game broadly considered to have industry-best animations: https://imgur.com/gallery/donkey-kong-super-smash-bros-ultimate-bjyzLxc https://imgur.com/gallery/donkey-kong-super-smash-bros-ultim...

the_af 4mo ago
What's the imperfection? The eyes are standard (and deliberate) cartoon animation. Or is there something else I missed?
bschwindHN 4mo ago
The DK games have used that eye popping animation since at least the SNES Donkey Kong Country games.

eqvinox 4mo ago

The application of "every frame perfect" to the mouse pointer ranges from neutral to actively harmful. It causes roughly 1 frame of delay, which can be enough to bump the display-eye-hand-mouse loop out of whack (this seems to be different from person to person). It also causes pointer stutter when the system is under load side the pointer can't be independently updated.

silon42 4mo ago
+1... every frame perfect is less important than lag (ie something should happen at next frame after user action). Pointer should be async with the rest of desktop anyway, unless the system is broken.

NetOpWibby 4mo ago

Thanks, I hate it.

mwkaufma 4mo ago

The thing about UI animation is that even if no tween frame was ever hinky I'd still turn it off because it's an anti-pattern. It's there to look good on a retail shelf, not to improve day to day usage.

seemack 4mo ago

I've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them. For anyone curious, https://www.thisischris.dev/projects/project-6/ https://www.thisischris.dev/projects/project-6/

Tyr42 4mo ago
Ty but the animations don't seem to animate on mobile chrome on Android.
- seemack 4mo ago
  Appreciate heads-up! I just checked Chrome on my Android device and it's all working fine for me. I don't know if I set the page up weirdly but I have to refresh the page sometimes for the videos to show up.
archagon 4mo ago
Great article! We’ve become so accustomed to UI jank these days…

iknowstuff 4mo ago

This is begging for someone to spin up Mac OS X Tiger or Snow Leopard and compare! I recall their butter smooth rollout animations looking pixel perfect

kridsdale3 4mo ago
I suspect the specific versions you call out were in that time period for a reason. Snow Leopard was the first to integrate iOS's CoreAnimation framework. Nearly all animations now are based on that. Before, the CPU manually updated the sizes and positions of things, frame by frame, in a loop. This is how you'd program a Game Engine. After, with CA, state-change property models are sent to a different process entirely which does its own interpolation to animate the UI at a higher thread-priority than any other process in the operating system. This is fantastic if maintaining 60+ FPS at all times, even on an iPhone 1 or 3G with less power than you'd have in today's AirPod chips, was a central requirement. (And it was, the first iPhones dominated their competitors in terms of input latency and framerate) But programming CoreAnimation is much more complicated and easy to make mistakes in if you want "every frame perfect". Trust me, I made a lot of the animations that shipped in iOS 7 (the Calendar app is full of them, OS level transitions for the core chome elements of iOS). It took nearly a year of meticulousness to get things looking ok. In the years since I left the company, I've noticed these transitions get more and more janky and buggy and full of artifacts. Clearly, whoever replaced me doesn't have the same eye and sense of craft. Oh well.
- iknowstuff 4mo ago
  I love you. Thanks for chiming in!

ptx 4mo ago

The KDE start menu has always annoyed me (well, since whenever they switched from the Windows 95 inspired one to the XP or Vista inspired one) for this reason. When you switch views, the view switches immediately (which is good) but the indicator animates slowly from one state to the other. The result is that the indicator is not really indicating what it's supposed to (since it's out of sync with the view): It's indicating the old view when I'm already in the new one, and then it's indicating something between the old and new views, when clearly I'm not between views at all. So it's completely wrong for the entire animation until it finishes.

samat 4mo ago

Steve Jobs would have fired a lot of people for this :)

huflungdung 4mo ago

[dead]

designerarvid 4mo ago

Dragning downwards on the iPhone Home Screen to search is a perfect example, the gradual blur animation is never auto playing once activated. Instead, it responds to your drag and you are always in control.

m132 4mo ago

I still have Sonoma on some of my devices. All I can say is: wow, steady regress. The save dialog, albeit a little shakey, is nowhere as chaotic as in your example. The buttons in Notes move between panes in a perfect seamless manner. Albeit the animation occasionally glitches out when you repeatedly focus and deselect the Safari bar, the cursor is perfectly timed with the text, only fading in after the text is done moving to the left. The Preview bug must be something recent too, I can't reproduce this. https://streamable.com/kx7op6 https://streamable.com/kx7op6 I miss it when companies like Apple, Sony, and IBM paid attention to the smallest details. Apple in particular earned its current valuation with the iPhone, an all-touch device that did nothing extraordinary compared to Windows Mobile and Symbian PDAs of the time (and was in fact functionally lagging behind compared, failing to even match the then-contemporary feature phones in some areas) BUT one that you didn't actually want to smash against a wall after a few minutes of use. Now these animations are bringing back exactly the Windows Mobile and Symbian vibes. Remember how happy Steve used to be with OS X animations? He would replay them on stage multiple times, in slow motion. These though, these would have the people behind them face the fate of the iPhone 4 antenna man.

inatreecrown2 4mo ago
The animations in your short video do in fact look more orderly and less chaotic. Could it be that Apple was using AppKit in Sonoma and switched to SwiftUI now?
vostrocity 4mo ago
A lot of these animation regressions in Apple's UI originated from iOS 7 and the move away from skeuomorphism. The move away from skeuomorphism made it acceptable for UI elements to do things that make no sense. Examples: 1. https://photos5.appleinsider.com/archive/13.06.15-Homescreen.jpg https://photos5.appleinsider.com/archive/13.06.15-Homescreen... The status bar is unreadable on in-between frames, whereas in iOS 6 there was no such problem. 2. https://youtu.be/XawiZc8qmWA?si=vqT-JEYf0NDp8I9o&t=461 https://youtu.be/XawiZc8qmWA?si=vqT-JEYf0NDp8I9o&t=461 Play it at 0.25x and notice the app opening animation. In iOS 6, the status bar is never unreadable for a single frame. In iOS 7, the status bar is first obstructed by home screen icons animating under it, then obstructed by the dock animating over it, and finally it fades away while a new status bar is drawn on the app that is being opened. It irks me to no end that iOS handles the status bar this way to this day. In the app switcher, every app card is drawn with a blank area at the top [1] where the status bar would go, when really the status bar should be permanently at the top and the app card should not include space for the status bar (webOS figured it out before iOS 7 [2]). 1. https://imgur.com/a/Qj6DGus https://imgur.com/a/Qj6DGus 2. https://imgur.com/a/bM8OWZc https://imgur.com/a/bM8OWZc

glitchc 4mo ago

We do not perceive the world as a series of still frames. Any UI forcing that upon us is unnatural and will break immersion in subtle and unexpected ways. Apple and macOS may have their faults but the UI design is head and shoulders above anything the Wayland team has produced to date.

throwaway613746 4mo ago

[dead]

Svoka 4mo ago

Bold words for the site which makes my eyes bleed.

ejflick 4mo ago
Articles from this site pop up occasionally. Something about the background color causes me to see a medium-sized bright spot in my vision after a few minutes. Due to this, I have to remind myself not to click when I see the URL.

dagmx 4mo ago

I have a lot of thoughts about this: I think this is a weakly presented argument. The article doesn’t actually present stronger alternatives or even why anything shown is negative to the user. It might be negative but otherwise this is the same vacant critique that is levied by pointing at smear frame or transitional points in media to critique it. The user also has an untenable maxim. Every frame must make sense? I would posit this is impossible, or I’d ask the author how they’d handle window resizing while keeping every frame perfect. I also think the author themself finds it easier to point out flawed frames (again without actually explaining why they’re issues) than doing as they say. Tap the header links on their blog and see the animations play after the click is complete. Or go see their own UI projects and see how text and objects don’t stay within their containers. Surely someone saying that this is a tenet that should be followed could demonstrate it themselves. I think this is just a very hollow critique on their end. A more competently written article would have focused on why anything shown is bad for the end user, and how they might handle it instead. A good critique should actually include some substance and point to more than just the what, but the why and how.

Normal_gaussian 4mo ago
I think your critique is actually the hollowest thing here. The article is presenting an idea, not a solution. You've failed to see this and have constructed several strawman arguments in order to critique it. Most importantly the article does not present itself in a definite sense - it is written with care to say "I think", "Next thought:", "Probably", "So yeah.". This article is a person sharing what they are thinking, and unlike many of my thoughts - it is a fairly complete thought which is clearly sparking many other reasonable people to think along similar lines. The author doesn't present the solution - but there is no reason they should have to. What an odd and unreasonable bar you set. I also don't find your attacks on the authors site particularly endearing. The taste gap is well known, and punishing someone for their conceptual contribution outstripping their practical skill is quite... distasteful. A more competently written critique would have been more charitable and in the spirit of this community.
- dagmx 4mo ago

ilsubyeega 4mo ago

Curious is there most efficient&precise(SOTA?) way to create animations/transitions(like theorem), I've written some of these and really hard to figure and fix out(e.g like the zoom animation from last section of page).

jiggawatts 4mo ago

A really infuriating example of this is the Windows Photos app (or whatever it is called this month) where scrolling through a photo album will show every image jumping around as it first shows them at some arbitrary scale, and then fits them to the window. Lazy, lazy development. "Job done, boss! Ready to ship to... checks notes... 3 billion users!" "Did you test it?" "Test? I thought we had a QA department!" "Nah, we fired all of them a decade ago. You're the QA now."

hexasquid 4mo ago

I scrolled the article and there were frames during the scroll where half a line of text was clipped by the start and bottom of the viewport.

LocalH 4mo ago

I don't want animation in my UI at all. I'd much rather have hard cuts between states, as it used to be. Wasting processing cycles making things look pretty yet it almost always results in a worse situation for the user.

deepsun 4mo ago

I couldn't understand author's point, because they haven't provided the right way to do each thing, their opinion. It's easy to criticize.

bigtones 4mo ago

The entire premise of this article is wrong and derived from a misquote. Kristian Høgsberg, in Wayland stated his goal was a system in which "every frame is perfect, by which I mean that applications will be able to control the rendering enough that we'll never see tearing, lag, redrawing or flicker." It had nothing to do with "if I take a screenshot of your app at any moment, it must make sense." As others here have pointed out - this entire article is very poorly conceived.

akersten 4mo ago
Misquote or not, the article is bang on and I think a better interpretation of that sequence of words anyway.
eviks 4mo ago
The entire premise of your comment is wrong and derived from not understanding this quote of the author: > Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.

rayiner 4mo ago

Excellent article. The examples from Mac OS Tahoe show how sloppy the work is. Just lazy shit done without attention and care. Steve Jobs would have fired a bunch of people. And this stuff matters: > This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings. The animations in iOS 26 and MacOS Tahoe feel wrong. Almost like an uncanny valley. It makes the UI unpleasant to use.

initramfs 4mo ago

note to self: run Wayland without systemd: https://news.ycombinator.com/item?id=34977129 https://news.ycombinator.com/item?id=34977129

dgudkov 4mo ago

Never use animation just for the sake of it. This article would not have existed had software designers stuck to this rule. All examples in the article use completely unnecessary animation.

ookblah 4mo ago

i actually like that the crop snaps after the fact, it reminds me that the crop is in fact active, same with rubber-banding type stuff.

jrm4 4mo ago

This silly pretentiousness goes a long way to explain why it took so long for Wayland to even be usable. I get that this is the way of the world, but I still think we'd have been be better off with, you know, real attention paid to classic free/open source ideas (like not breaking backward compatibility.)

jauntywundrkind 4mo ago

It feels like this could get significantly worse with Apple introducing folding devices. There's already a good number of iOS form factors that need to be supported, and now you need to be able to transition between form factors too. It feels like the ability to carefully handcraft nice interfaces is going down, as combinations go up. https://news.ycombinator.com/item?id=48461226 https://news.ycombinator.com/item?id=48461226 https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-folding/ https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-fold...

iamcalledrob 4mo ago

The root cause of this stuff, from experience, is that animations are hard to retro-fit after the fact. It's a lack of planning. The UI code needs to be structured with animation in mind, with hooks in the right places. And to do that, you need to know what is likely to be animated together. But what ends up happening is you encapsulated a few of the moving pieces in abstractions (e.g. "toolbar", "sidebar"), but you want to animate stuff within. You end up copy+pasting animation logic inside each (now leaky) abstraction and duct taping it all together. UI abstractions are hard! (Yes, on apple platforms there are transition blocks which will capture changes to the entire view hierarchy, but then the battle becomes preventing animations on stuff that shouldn't change!)

misiek08 4mo ago

I think it’s Apple motto since 2011: „Never care about quality again”. I still can't believe Rosetta was delivered and works like that.

liendolucas 4mo ago

One thing I will never understand is why do me need to have animations at all? There is zero value on them. Worse I'm inclined to believe that they introduce a nasty amount of bugs and they also need to be maintained.

mike_hock 4mo ago
Good animations do a lot for how the app feels. Like all code, they need to be kept in sync when related parts of the code change, of course, so yes, they're a non-zero development and maintenance burden. So what I don't get is the need to have half-assed animations in a half-assed app. You can add them once everything else is perfect.
latexr 4mo ago
Animations give you clues as to what is happening and how to undo it. A great example is the macOS “genie effect” when minimising windows. A first time user who clicked the minimise button on a window and saw it simply disappear would be lost as to where it went or how to get it back. Even as it appeared on the Dock, the lack of animation there as well could be imperceptible or the user might be unable to see what changed. By having a clear animation which indicates where the window is being moved to, it’s obvious where the window went and thus how to recover it.

dsego 4mo ago

The last one is such an obvious bug when the animation scales the canvas but does not translate the origin to compensate at the same time.

ErneX 4mo ago

Fully agree with OP, bad animations are jarring.

rkourdis 4mo ago

I've been learning a bit of Swift / SwiftUI recently while building a macOS app and this seems to be a problem all the way down the tech stack, even for simple apps. While it's been surprisingly easy to animate things, I've spent way too long trying to synchronize the movement of different components, to make sure things don't jump around, etc. Window content snaps to size while the borders animate, the shadow doesn't refresh alongside the borders, that sort of thing. Maybe I'm missing something in terms of how I should set up my code, or maybe it's a hard problem to solve automagically in a framework. In some cases I basically gave up on slow animations (which make the issues obvious) and rely on fast movement to hide the imperfections - but it creates a less polished feeling as the article points out.

hmokiguess 4mo ago

Can we get Apple to employ Niki and have him lead design please

kstenerud 4mo ago

Or, just stop using so many animations. In most UIs, it feels like they're animated for the sake of being animated. Very rarely do I say "Ah, I'm glad that was animated, because the transition would be confusing otherwise." Things like this are part of the reason why operating systems that used to measure in the tens of megabytes now measure in the tens of gigabytes, and require chips 1000x more powerful in order to MAYBE reach the same level of snappiness (although usually not).

jader201 4mo ago

As great as the spirit of this article is, it only offers problems without solutions. I’d love to see example of “bad” solutions made “good”. As a result, I feel like solving this problem is easier said than done. I can’t think of a great way to solve many of the problems presented here. (Admittedly, I’m not a UX designer, so the bar is low for me.)

wiseowise 4mo ago

But Niki, nobody cares about animations! Apparently caring about details is labeled "OCD" now, and "just make it good enough, we'll fix this later".

liampulles 4mo ago

Most stupid animations I have seen introduced to UIs are done because they are stupidly effective at impressing business stakeholders, especially non-technical ones. It never fails to astound me how some people will fawn over "delightful" transitions. I guess I can understand it in the sense that it is an easy thing to help communicate the perception of high quality to the broader business.

plastic041 4mo ago

People should know that most of the Mac examples shown in the article are regressions that happened in Tahoe. - Sequoia's Notes had perfect sliding animation. - Safari's URL bar seemed the same. (Though I think it's more a placement issue, not animation issue. They could just put a placeholder at the end of the bar, not at the center.) - 'Save as' dialog had a problems with sidebar, but not janky as much as Tahoe's. - Zooming in preview app worked fine.

Centigonal 4mo ago

I don't know if I agree with this, especially in the context of animation: https://www.bloopanimation.com/the-art-of-smear-frames/ https://www.bloopanimation.com/the-art-of-smear-frames/

maxjackson92 4mo ago

[dead]

nedt 4mo ago

I still remember that you could slow down animations in OS X - I think with the shift key. Steve Jobs even did it in presentations because they looked so gorgeous in slowmo. If we‘d still have that I‘m sure they would care more about that every frame.

projektfu 4mo ago

Bad things: - An animation that prevents the next thing for enough milliseconds that it causes input loss. Example - the iPhone calculator that wouldn't accept the next digit until the last press was done animating. - Animation that moves active elements like buttons out of or into the way as you are clicking/tapping, causing an errant click. - A lack of animation or visible context change that causes you to not realize the screen has changed. This sometimes gets me when I click another section or chapter in some kind of two-pane interface and the other side updates at a random time. - Animations that take so long that you can't work at the speed of your hand/eye/brain coordination. - Animations that feel like you're trapped in a liminal space until they're finished, which I think is basically the subject of the article. Better things: - Coordinated animations that accentuate updates, especially when you didn't request them. Reordering a leaderboard, adding a new item in the middle of a list from a distant update, etc. - Animations that cover for slow processes. If we expect a while (but not too long) before a request and a response, an animation can be better than a spinner or nothing at all. It might help prevent the rapid clicking that some users do. I prefer if it doesn't spend a whole second when the response comes back in a tenth of a second. - Stylistic animations that don't affect how you work. The genie effect and the bouncing app animation of old Mac OS X come to mind. A key feature is that you usually can turn them off.

GuB-42 4mo ago

Animation is all about trickery, especially real time animation where you have a performance budget, like in video games. You can reveal the trick by doing frame by frame, or other techniques, but it matters less than the overall feel. It is more of an art form than an exact science. Often the animation itself is the trick. The backend is too slow to deliver data in time, so you start some animation to hide the latency. If you make a screen capture during that time, of course you won't see the data because it is not there yet, that's the trick. Ideally, the back end should keep up, this way, you don't even need an animation, but sometimes, you have to make do with what you have.