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

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.

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.

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

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.

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?

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.

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

This blog makes me appreciate my browser's reading mode

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.