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.

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.

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.

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

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.

I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.

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.

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

How do I get there? What are the resources I can read and learn from to look at things to make them perfect?