Every Frame Perfect • Hacker News Board

Re: Every Frame Perfect

#41

Post by ryukoposting » Sat, Jun 13, 2026, 4:59 PM UTC

ikesau wrote: post #4

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 a…

> At the same time, why does everything need motion?

They don't. Most things don't. This kind of nonsense keeps an extra half-dozen people employed, and gives license to a half-dozen other people to smugly proclaim $BRAND's design language is superior to alternatives.

In most of the cases shown, it would probably feel better if the animations weren't there. I clicked the button, show me the thing. Don't do a dance and then show me the thing, just show it!

Re: Every Frame Perfect

#42

Post by mawadev » Sat, Jun 13, 2026, 4:59 PM UTC

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.

Re: Every Frame Perfect

#43

Post by jayd16 » Sat, Jun 13, 2026, 4:59 PM UTC

Kiro wrote: post #36

ikesau wrote: post #4

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 a…

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

You will also see plenty of cases where a screenshot captures incoherent frames.

Squash and stretch is a whole art style that relies on unrealistic frames.

Re: Every Frame Perfect

#44

Post by mrob » Sat, Jun 13, 2026, 5:00 PM UTC

Kiro wrote: post #36

ikesau wrote: post #4

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 a…

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

Games are entertainment products, not tools. It's acceptable for a game UI to draw attention to itself for artistic effect, but I don't want to have to put up with this when I'm trying to get work done. Instant state transitions become imperceptible as you learn how they work. An instant UI effectively functions as part of your body, just like hand tools do. Animations make this impossible.

Compare an ordinary pencil (no animations, movement is directly tied to your hand) to a pencil with a pompom on a spring attached to the end. Which is most fun for brief use? Which would you rather write a whole page of text with?

Re: Every Frame Perfect

#45

Post by embedding-shape » Sat, Jun 13, 2026, 5:01 PM UTC

hk__2 wrote: post #37

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

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.

Re: Every Frame Perfect

#46

Post by pmontra » Sat, Jun 13, 2026, 5:01 PM UTC

Kiro wrote: post #36

ikesau wrote: post #4

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 a…

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

Games are games, work is work. I disabled every animated transitions in my desktop UI. Elements appear instantly at full size in the place they rest and disappear instantly.

Reasons:

1) I'm doing that thousands of times per week, I know what's going to happen

2) It's my desktop, there is no one else who might be puzzled by a non standard behavior

3) It's faster.

By the way, it is a GNOME desktop on Debian 13.

Oops, I lied. I was about to click on Reply and I realized that the bottom panel (which on a standard GNOME is at the top) is on autohide with a short transition. Maybe because it's the only transition that I activate with the mouse pointer: I hit the bottom of the screen and while it's traveling the last pixels the bar starts sliding in. It's very fast.

Re: Every Frame Perfect

#47

Post by motoroco » Sat, Jun 13, 2026, 5:03 PM UTC

hk__2 wrote: post #37

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

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

Re: Every Frame Perfect

#48

Post by montroser » Sat, Jun 13, 2026, 5:04 PM UTC

hk__2 wrote: post #37

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

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.

Re: Every Frame Perfect

#49

Post by ryukoposting » Sat, Jun 13, 2026, 5:04 PM UTC

naet wrote: post #25

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

Re: Every Frame Perfect

#50

Post by mawadev » Sat, Jun 13, 2026, 5:04 PM UTC

mrob wrote: post #44

Kiro wrote: post #36

Earlier quoted context omitted.

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

Games are entertainment products, not tools. It's acceptable for a game UI to draw attention to itself for artistic effect, but I don't want to have to put up with this when I'm trying to get work done. Instant state transitions become imperceptible as you learn how they work. An instant UI effectively functions as part of your body, just like hand tools do. Animations make this impossible. Compare an ordinary pencil…

I think this is key to understand the motivation behind pretty and animated UIs. In games it has a different motivation compared to UIs that you use as a tool. If you compare old software to new software, a lot of tab switching and hotkey magic is simply not there anymore. Blender has a notoriously difficult UI but once you get the hang of it, you become very efficient. I think the current way of creating UIs caters to people making decisions of whether to purchase the software but that don't actually use the software in the end.