Every Frame Perfect

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.

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

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.

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.

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.

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.

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/

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.)

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.

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.

> 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.

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

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.

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

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

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".

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!)

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.

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.

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.

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

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.

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.

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.

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.

Fully agree with OP, bad animations are jarring.

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.

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.

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).

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.

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.

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.

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.

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.

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

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

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".

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.

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

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.

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

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..