5 ms·

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 a

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".
- deleted 4mo ago
  [deleted]
jesse__ 4mo ago
I like this comment. The idea that animations should be able to be picked apart frame by frame and always be coherent doesn't make much sense, because the user will never actually do that. I do like the point the article makes about using ui fidelity as a proxy for software quality, and agree that they pointed out some bad animations. But, I think you hit the nail on the head .. frame by frame coherence isn't the best yardstick for measuring animation "goodness".
- makapuf 4mo ago
  Exactly, you should optimize for quality and have a high bar forbit but I'm not sure sacrificing framerate for pixel perfect rendering or perfect subpixel antialiasing and compositing a perfect glass chroma aberration when wheezing a superfast animation is more important than it being solid 144Hz or audio synced.
jchw 4mo ago
I think you are taking it a step too far. First of all, unlike film, we are not recording reality in any way, every pixel that appears on screen is there because we put it there. I'd argue a closer parallel is a cartoon. And something like cartoon inbetweening is not an example of imperfect frames. These are in fact, perfect and even carefully crafted frames. It's one thing if the frame halfway through an animation looks a bit "funny", but is still completely logically correct. It is another if the intermediate state of the animation legitimately doesn't make any sense and is just the result of not really caring about what actually goes on during the animation. In that case I'd almost rather just not have the animation at all, or just have a simpler one.
- iterateoften 4mo ago
  Frame transitions in film do not in fact exist in reality. They are added in the editing room or through manipulation of the recording mechanism fyi.
- fasterik 4mo ago
  We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.
  - jchw 4mo ago
    The point is that if a pixel is in a nonsensical place the only thing that is to blame for that is the code. It doesn't matter if it looks pleasing; there's no good reason for something to be wrong just because it looks acceptable.
  - jancsika 4mo ago
    If you can't even guarantee internally consistent state then good luck communicating your "convincing and aesthetically pleasing effapt update && apt upgradeects" successfully.
- jakelazaroff 4mo ago
  We do this in cartoons as well. Check out this Spider-Verse animator breaking down a shot of Gwen drumming. [1] If you look at individual frames, there are all sorts of details that make no logical sense. In one frame, she actually has three hands! But it looks great if you see it in motion. [1] https://xcancel.com/hf_rosa/status/1089675426312552449 https://xcancel.com/hf_rosa/status/1089675426312552449
nvme0n1p1 4mo ago
The final "zoom animation from Preview app" also illustrates the inverse. Every frame looks perfect in isolation, just like the author wants. It's only when you see it in motion that you notice the issue.
- eviks 4mo ago
  It doesn't look perfect, the image is misaligned.
hamburglar 4mo ago
I think it’s pretty telling that with the YouTube example, I legitimately couldn’t figure out what he could have a problem with until he slowed it down. The overall effect worked and gave the impression that it was aiming for. The fact that you can get out your calipers and find flaws in a paused animation is not compelling in the least to me. I don’t think looking at your animations in slow motion is a bad exercise — it may reveal unintentional things — but I don’t buy that animations need to “make sense” when paused in the middle any more than a 250ms snippet of audio clipped out of the middle of a word needs to make sense.
- tosti 4mo ago
  True that, but imho the jankiness of the video is clearly visible. It just jumps into place halfway.
- jcelerier 4mo ago
  It's crazy for me to think that people cannot see how wrong it is from the normal speed video. For me it's obvious and infuriating, it physically feels like it's punching my retina
mrandish 4mo ago
I initially thought "Every Frame Perfect" meant a strict avoidance of any jank or stutter in motion, which I'm fully on-board for but as a film, video and 3D technologist, you're spot on calling out motion blur and similar temporal artifacts. In motion, they not only look 'most correct' to the human visual system, they are the most interpretable. Adding the correct blur to motion makes it appear clearer but seen as a still, it's obviously not clearer. The nuance is correct motion blur appears clearer while guaranteeing it's as clear as the human visual system can perceive moving details at that speed, so no perceptual detail is actually lost. It's a method that objectively improves perception which only works in motion. If frozen, the method breaks. Thus, evaluating motion blurred stills for clarity or interpretability is incorrect. The rest of the article focuses on details of proper implementation while missing the opportunity to question whether some of these animations should exist at all. IMHO, motion can be a valuable affordance in limited doses but it's reached a point of overuse and, in some cases, outright abuse of the user's visual field and cognitive load. Designers (and their PMs) see it as a badge of 'Refined Modern UX' but it's devolved into a trendy gimmick aping good design without being good design.
- fasterik 4mo ago
  Regarding your last point, I think it's almost always wrong to move something discontinuously, but I do think designers should think a lot more about getting out of the way of the user. A 50-100 ms animation is more than enough for most motions and keeps the UI feeling snappy. Also, animation should be decoupled from input wherever possible. I hate it when I have to sit there waiting for an animation to complete before the app will start acknowledging my keystrokes.
  - mrandish 4mo ago
    > I think it's almost always wrong to move something discontinuously Yes, I think we agree. When a thing is becoming a larger/smaller form of itself in a different place, it can be useful to cue the relationship visually with motion. But there are times when the change or displacement is minor enough, I do prefer 'just do it', even when the animation is hyper-fast. It's just more visual/cognitive clutter. It's obviously situational, and if such motion is always very fast, consistent and well-motivated, it never rises to the level of annoying me. I might personally prefer some instances where, if the position overlaps and the size change is minor, just skipping it, but it's not 'bad'. I think the key may be that, done properly, such motion should cognitively be a 'barely there' hint. The moment a state-change animation rises to having perceivable aesthetic value, like being 'pleasing', it's too much. As the senior product owner, I once had a new designer argue that if an animation was as fast as I wanted, no one would be able to appreciate the excellent S-curve ease-in/out. :-) I had to explain if a simple state-change animation was slow enough to be consciously 'appreciated', it had failed in its purpose.
willXare 4mo ago
[flagged]
brandensilva 4mo ago
This article would do better to show good use cases to draw strengths to their premise but I agree with your take that frames matter less than the total feel of the transition. Some of them definitely could be improved of what he outlined. I find AI to feel real nice for pushing delight like this further than I used to have time for as it was never a priority.
ChrisMarshallNY 4mo ago
> the premise of the article I wouldn't mind it, if he had supplied suggested mitigations. I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones, which heavily abstract you from the iron, and, if other frameworks are supplied, the abstraction goes even farther. It can be a major engineering effort, to improve a half-second animation. That said, this is how designers work. I have worked with some of the top designers in the world, and it can be tempting to want to strangle them, as they choose a half-pixel alias as the hill to die on. But if we try to work with them, it can make an enormous difference in how users react to our software.
- gyomu 4mo ago
  > I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones Yes, this is a major factor for the regression in overall UI quality and consistency on Apple platforms. SwiftUI aims to make all those fancy animations transitions a single line view modifier rather than 30 lines of manually specified CoreAnimation easing curves and manual animation blocks, but it results in a lot of things just feeling janky, because one-size-fits-all rule and precise polish are fundamentally at odds.
rayiner 4mo ago
> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. Maybe that’s sometimes true. But, more often, the intermediate states will contribute in a predictable way to the overall look of the animation and if the intermediate states don’t look coherent, then the animation as a whole will be hard to understand. The examples in the article make this clear. For example, the search box where the initial text animates from the middle while the cursor starts on the left. That disconnects the text from the cursor. There’s no reason for that. It’s just shitty animation work.
initramfs 4mo ago
agree. I hacked a Panasonic GH1 to use 24fps in 2014. My newer camera, the GX85 includes this frame rate by default. Movies look more dreamlike in 24fps, due to the magic number of resetting some cycle every 5 seconds (24 frames in 5 seconds is 120 frames). Seinfeld was also filmed in 24fps. Maybe the jokes sounded funnier becaue of that? I don't know, but I enjoy playing games at 20- 30fps more than 60fps for the cinematic effect.
- Gigachad 4mo ago
  The difference with games is that they generally don't have motion blur, every frame is sharp like a photo, so at low framerates like 30 you can see a distracting judder from the series of low fps sharp frames which you don't see in movies. At high framerates your eyes will naturally see blur in the same way your eyes see your hand waving as blurry even though there is theoretically infinite frames. Some of this is also just learned and cultural. 24fps looks like movies because movies are 24fps and you have learned to make that association. In the same way certain color grades and aspect ratios look cinematic, just because that's a reinforced association rather than an inherent fact.
  - initramfs 4mo ago
    agreed, there is a memory aspect to it too. That said, there is something about this video that looks funny: https://www.youtube.com/watch?v=M3-15YADeyg https://www.youtube.com/watch?v=M3-15YADeyg (I made this last year)
deleted 4mo ago
[deleted]
eviks 4mo ago
> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. For example?
- bmacho 4mo ago
  Parent comment already mentions motion blur in movies. In animation (2d, 3d, stop motion) there are smear frames: https://en.wikipedia.org/wiki/Smear_frame https://en.wikipedia.org/wiki/Smear_frame In this thesis you can find examples from different media, including games: https://theses.fh-hagenberg.at/system/files/pdf/Lendenfeld18.pdf https://theses.fh-hagenberg.at/system/files/pdf/Lendenfeld18... I'm not aware of any normal software intentionally using nonsensical frames in their UI to aid perceiving motion.
  - eviks 4mo ago
    That was an analogy, and about art and artistic effect. What does it exploit in human vision?? Your example is even worse - it's a cost-driven degradation of quality > smear frames helped to reduce production costs > I'm not aware of any normal software Ok, but that was the question to shift from some generic theory about how human vision isn't perfect and dynamic vs static to a practical example we can see and evaluate - just like the examples in the blog, where you can clearly see the issues both dynamically and statically
    - bmacho 4mo ago
      ??? No, artists (of every animated media: 2d, 3d, stop motion, video game) intentionally put extra effort into creating ugly frames. Not based on theory, but based on taste (artists' personal taste, or measured). It's not a cost cutting method, not anymore. It actually requires extra effort, and it makes the product more expensive. Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system. Either way this does not say much about whether youtube should have only sensible frames or not. But it points to the direction that (intentionally) broken, nonsensical frames in UI are worth exploring--they are everywhere in animated arts. As GP has said: "It's very possible".

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".
deleted 4mo ago
[deleted]

jesse__ 4mo ago

I like this comment. The idea that animations should be able to be picked apart frame by frame and always be coherent doesn't make much sense, because the user will never actually do that. I do like the point the article makes about using ui fidelity as a proxy for software quality, and agree that they pointed out some bad animations. But, I think you hit the nail on the head .. frame by frame coherence isn't the best yardstick for measuring animation "goodness".

makapuf 4mo ago
Exactly, you should optimize for quality and have a high bar forbit but I'm not sure sacrificing framerate for pixel perfect rendering or perfect subpixel antialiasing and compositing a perfect glass chroma aberration when wheezing a superfast animation is more important than it being solid 144Hz or audio synced.

jchw 4mo ago

I think you are taking it a step too far. First of all, unlike film, we are not recording reality in any way, every pixel that appears on screen is there because we put it there. I'd argue a closer parallel is a cartoon. And something like cartoon inbetweening is not an example of imperfect frames. These are in fact, perfect and even carefully crafted frames. It's one thing if the frame halfway through an animation looks a bit "funny", but is still completely logically correct. It is another if the intermediate state of the animation legitimately doesn't make any sense and is just the result of not really caring about what actually goes on during the animation. In that case I'd almost rather just not have the animation at all, or just have a simpler one.

iterateoften 4mo ago
Frame transitions in film do not in fact exist in reality. They are added in the editing room or through manipulation of the recording mechanism fyi.
fasterik 4mo ago
We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.
- jchw 4mo ago
  The point is that if a pixel is in a nonsensical place the only thing that is to blame for that is the code. It doesn't matter if it looks pleasing; there's no good reason for something to be wrong just because it looks acceptable.
- jancsika 4mo ago
  If you can't even guarantee internally consistent state then good luck communicating your "convincing and aesthetically pleasing effapt update && apt upgradeects" successfully.
jakelazaroff 4mo ago
We do this in cartoons as well. Check out this Spider-Verse animator breaking down a shot of Gwen drumming. [1] If you look at individual frames, there are all sorts of details that make no logical sense. In one frame, she actually has three hands! But it looks great if you see it in motion. [1] https://xcancel.com/hf_rosa/status/1089675426312552449 https://xcancel.com/hf_rosa/status/1089675426312552449

nvme0n1p1 4mo ago

The final "zoom animation from Preview app" also illustrates the inverse. Every frame looks perfect in isolation, just like the author wants. It's only when you see it in motion that you notice the issue.

eviks 4mo ago
It doesn't look perfect, the image is misaligned.

hamburglar 4mo ago

I think it’s pretty telling that with the YouTube example, I legitimately couldn’t figure out what he could have a problem with until he slowed it down. The overall effect worked and gave the impression that it was aiming for. The fact that you can get out your calipers and find flaws in a paused animation is not compelling in the least to me. I don’t think looking at your animations in slow motion is a bad exercise — it may reveal unintentional things — but I don’t buy that animations need to “make sense” when paused in the middle any more than a 250ms snippet of audio clipped out of the middle of a word needs to make sense.

tosti 4mo ago
True that, but imho the jankiness of the video is clearly visible. It just jumps into place halfway.
jcelerier 4mo ago
It's crazy for me to think that people cannot see how wrong it is from the normal speed video. For me it's obvious and infuriating, it physically feels like it's punching my retina

mrandish 4mo ago

I initially thought "Every Frame Perfect" meant a strict avoidance of any jank or stutter in motion, which I'm fully on-board for but as a film, video and 3D technologist, you're spot on calling out motion blur and similar temporal artifacts. In motion, they not only look 'most correct' to the human visual system, they are the most interpretable. Adding the correct blur to motion makes it appear clearer but seen as a still, it's obviously not clearer. The nuance is correct motion blur appears clearer while guaranteeing it's as clear as the human visual system can perceive moving details at that speed, so no perceptual detail is actually lost. It's a method that objectively improves perception which only works in motion. If frozen, the method breaks. Thus, evaluating motion blurred stills for clarity or interpretability is incorrect. The rest of the article focuses on details of proper implementation while missing the opportunity to question whether some of these animations should exist at all. IMHO, motion can be a valuable affordance in limited doses but it's reached a point of overuse and, in some cases, outright abuse of the user's visual field and cognitive load. Designers (and their PMs) see it as a badge of 'Refined Modern UX' but it's devolved into a trendy gimmick aping good design without being good design.

fasterik 4mo ago
Regarding your last point, I think it's almost always wrong to move something discontinuously, but I do think designers should think a lot more about getting out of the way of the user. A 50-100 ms animation is more than enough for most motions and keeps the UI feeling snappy. Also, animation should be decoupled from input wherever possible. I hate it when I have to sit there waiting for an animation to complete before the app will start acknowledging my keystrokes.
- mrandish 4mo ago
  > I think it's almost always wrong to move something discontinuously Yes, I think we agree. When a thing is becoming a larger/smaller form of itself in a different place, it can be useful to cue the relationship visually with motion. But there are times when the change or displacement is minor enough, I do prefer 'just do it', even when the animation is hyper-fast. It's just more visual/cognitive clutter. It's obviously situational, and if such motion is always very fast, consistent and well-motivated, it never rises to the level of annoying me. I might personally prefer some instances where, if the position overlaps and the size change is minor, just skipping it, but it's not 'bad'. I think the key may be that, done properly, such motion should cognitively be a 'barely there' hint. The moment a state-change animation rises to having perceivable aesthetic value, like being 'pleasing', it's too much. As the senior product owner, I once had a new designer argue that if an animation was as fast as I wanted, no one would be able to appreciate the excellent S-curve ease-in/out. :-) I had to explain if a simple state-change animation was slow enough to be consciously 'appreciated', it had failed in its purpose.

willXare 4mo ago

[flagged]

brandensilva 4mo ago

This article would do better to show good use cases to draw strengths to their premise but I agree with your take that frames matter less than the total feel of the transition. Some of them definitely could be improved of what he outlined. I find AI to feel real nice for pushing delight like this further than I used to have time for as it was never a priority.

ChrisMarshallNY 4mo ago

> the premise of the article I wouldn't mind it, if he had supplied suggested mitigations. I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones, which heavily abstract you from the iron, and, if other frameworks are supplied, the abstraction goes even farther. It can be a major engineering effort, to improve a half-second animation. That said, this is how designers work. I have worked with some of the top designers in the world, and it can be tempting to want to strangle them, as they choose a half-pixel alias as the hill to die on. But if we try to work with them, it can make an enormous difference in how users react to our software.

gyomu 4mo ago
> I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones Yes, this is a major factor for the regression in overall UI quality and consistency on Apple platforms. SwiftUI aims to make all those fancy animations transitions a single line view modifier rather than 30 lines of manually specified CoreAnimation easing curves and manual animation blocks, but it results in a lot of things just feeling janky, because one-size-fits-all rule and precise polish are fundamentally at odds.

rayiner 4mo ago

> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. Maybe that’s sometimes true. But, more often, the intermediate states will contribute in a predictable way to the overall look of the animation and if the intermediate states don’t look coherent, then the animation as a whole will be hard to understand. The examples in the article make this clear. For example, the search box where the initial text animates from the middle while the cursor starts on the left. That disconnects the text from the cursor. There’s no reason for that. It’s just shitty animation work.

initramfs 4mo ago

agree. I hacked a Panasonic GH1 to use 24fps in 2014. My newer camera, the GX85 includes this frame rate by default. Movies look more dreamlike in 24fps, due to the magic number of resetting some cycle every 5 seconds (24 frames in 5 seconds is 120 frames). Seinfeld was also filmed in 24fps. Maybe the jokes sounded funnier becaue of that? I don't know, but I enjoy playing games at 20- 30fps more than 60fps for the cinematic effect.

Gigachad 4mo ago
The difference with games is that they generally don't have motion blur, every frame is sharp like a photo, so at low framerates like 30 you can see a distracting judder from the series of low fps sharp frames which you don't see in movies. At high framerates your eyes will naturally see blur in the same way your eyes see your hand waving as blurry even though there is theoretically infinite frames. Some of this is also just learned and cultural. 24fps looks like movies because movies are 24fps and you have learned to make that association. In the same way certain color grades and aspect ratios look cinematic, just because that's a reinforced association rather than an inherent fact.
- initramfs 4mo ago
  agreed, there is a memory aspect to it too. That said, there is something about this video that looks funny: https://www.youtube.com/watch?v=M3-15YADeyg https://www.youtube.com/watch?v=M3-15YADeyg (I made this last year)

deleted 4mo ago

[deleted]

eviks 4mo ago

> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. For example?

bmacho 4mo ago
Parent comment already mentions motion blur in movies. In animation (2d, 3d, stop motion) there are smear frames: https://en.wikipedia.org/wiki/Smear_frame https://en.wikipedia.org/wiki/Smear_frame In this thesis you can find examples from different media, including games: https://theses.fh-hagenberg.at/system/files/pdf/Lendenfeld18.pdf https://theses.fh-hagenberg.at/system/files/pdf/Lendenfeld18... I'm not aware of any normal software intentionally using nonsensical frames in their UI to aid perceiving motion.
- eviks 4mo ago
  That was an analogy, and about art and artistic effect. What does it exploit in human vision?? Your example is even worse - it's a cost-driven degradation of quality > smear frames helped to reduce production costs > I'm not aware of any normal software Ok, but that was the question to shift from some generic theory about how human vision isn't perfect and dynamic vs static to a practical example we can see and evaluate - just like the examples in the blog, where you can clearly see the issues both dynamically and statically
  - bmacho 4mo ago
    ??? No, artists (of every animated media: 2d, 3d, stop motion, video game) intentionally put extra effort into creating ugly frames. Not based on theory, but based on taste (artists' personal taste, or measured). It's not a cost cutting method, not anymore. It actually requires extra effort, and it makes the product more expensive. Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system. Either way this does not say much about whether youtube should have only sensible frames or not. But it points to the direction that (intentionally) broken, nonsensical frames in UI are worth exploring--they are everywhere in animated arts. As GP has said: "It's very possible".