#motion design

Motion design, animations, and transitions / 13 posts

Newsletter
  • Get a newsletter digest every Friday:
Contact

Send me feedback, tips, bug reports, and anything else:

About me and the blog

My name is Marcin Wichary. I’ve worked as a UX designer, typographer, front-end person, and manager at Google, Medium, and Figma. I’ve also written a book about keyboards and typing, gave talks, and published essays about design, typography, and technology.

Unsung is my blog about software craft and quality.

More info about Unsung

Send me feedback, tips, bug reports, and anything else:

More info about Unsung

“First, don’t interfere with user input.”

In response to a previous post, one of the readers wrote this:

I would phrase this as the fault of the animation having violated the Hippocratic oath for animations, which is “first, do no harm” a.k.a. “first, don’t interfere with user input”.

Yes, one has to be afraid of hyperbole – was there ever an onscreen transition that saved a life? – but there is something I really liked about this phrasing. After all, most transitions and animations are decorators, and every transition and animation is, by definition, also a delay.

Here’s Shazam as I open it, and overlaid are my frantic taps as I’m trying to make it start the song recognition process:

It’s a cute cold start animation, but:

  • It’s not interruptible, like animations should be.
  • It doesn’t even buffer the taps, so – in case the animation covers for something truly uninterruptible, like loading from the cloud – I can’t simply tap and forget, but instead have to wait and tap after it’s done animating.

What’s particularly frustrating here is how Shazam is being used. On the other end of this whole flow is a song that might already be fading out – timing myself, a user, can’t control – so time wasted on the uninterruptible animation might be seconds separating failure from success.

I know it does feel like a blink of an eye when watched out of context, and it is literally just a bit over a second of a delay in the best case scenario, but I wanted to share it as a general example. I believe these seconds add up, especially in a stressful moment, on an older device, repeated many times a day, across different apps… or all of the above. (My go-to example: Imagine your keyboard keys reacting with a second of delay!)

At least, I should compliment Shazam for not making another mistake: after the recognition starts, tapping the same button doesn’t cancel it – instead, you have to tap a close box in the corner. Here, the designers realized I might actually be slamming the big button many times over, and I shouldn’t be punished for it even more.

DaisyDisk’s onboarding

Any Mac app that has to ask for system permissions has its work cut out for it. In a previous post I showed “the MacCharlie method,” which looked like this:

DaisyDisk, a disk cleanup app, does something different.

First of all, I like that the app icon is animating here to indicate it’s movable. It’s a version of “jiggle mode” and while it would be frustrating to see it in a common UI surface (our brains our wired to be distracted by movement, especially in the periphery), this is a tab that you only click into to fix this:

But something even more interesting happens. The moment you start dragging the icon, the app actually spawns System Settings, positions them close, and even opens them at the right pane… so you can just drag the icon over:

I don’t believe I have ever seen anything like it before. This feels a bit aggressive, but I think it is… good?

I now wonder, however, why do the instructions still tell me to do it by hand. What if they just had a wiggly icon saying, “start dragging it, and we’ll open Settings for you,” with only some fallback or manual option if wanted?

“A quick internet search should provide you with step-by-step instructions.”

In 2018, Tom Cruise and Christopher McQuarrie teamed up to make a short PSA about the dangers of frame rate interpolation, a.k.a. the soap opera effect:

It’s a strangely boring video from the men known for exciting filmmaking, but it captures a fascinating debate. TL; DR of their argument: Home TVs have an option to take a typical 24fps movie and create interim frames to make it feel like a 60fps production. It’s often on by default, but you should turn it off.

What’s interesting is that 60 or more fps is indeed in some ways objectively better: you see smoother movement, and you can notice more. Once you start paying attention, any whip pan or drastic movement in the cinematic 24fps appears very choppy…

…and, of course, that is completely missing the point. The argument for 24fps is that it’s simply cinema’s vernacular, right next to anamorphic lenses with their blue lens flares and vertical stretching. The movies are not about conveying information, but they are about conveying a certain feel. (And also, about tradition.)

I’m mentioning this because I spotted a similar battle happening when it comes to scrolling.

Go to any page in Vivaldi and hold a down arrow key for a while. That scrolls through the page, moving it in chunks, reacting immediately to the initial key press and then the synthesized autorepeat presses:

Firefox listens to the keys the same way, but it “upgrades” the choppiness to a 60fps movement by interpolating it:

And Safari does something different altogether – it approaches it more like a game physics engine would. It only listens to ↓ down (when it turns on the scrolling “motor”) and then ↓ up (when it turns it off):

This has an interesting effect: the movement is smoother than even Firefox’s – that’s because it doesn’t try to straighten something choppy, but it is itself smooth, by nature.

At the same time, this approach feels a bit loose, like driving an old 1960s car. It also takes away any control of speed; Safari pages always scroll at this rate, no matter your keyboard settings. (Arguably, however, control via the key repeat rate that other browsers respect is also an illusion, as it affects typing as well. Would you ever change it just to control the scroll speed?)

Of course, the analogy to frame interpolation doesn’t really make sense. Safari is not a soap opera, Firefox is not a smooth motion effect on your TV, and Vivaldi is not a cinematic experience. In contrast with movies and television, I don’t think there are any expectations or tradition here.

In this particular context, I believe Firefox and particularly Safari are better because this is about conveying information, and smoother scrolling does help your eyes and your brain connect all the little befores with all the little afters.

But I am sharing it mostly as a reminder that a keyboard is really just a button board by a different name. And sometimes it’s good to look at a key hold, and decide:

  • is this a sequence of pulsating key presses,
  • or is it a button being held down and then released up?

“It would’ve been much simpler to just use an animated cigar.”

In this 7-minute video, kaptainkristian talks about the fascinating process of making Who Framed Roger Rabbit, the pre-CGI hybrid animation/​live action movie from 1988:

This is called “bumping the lamp” – a phrase coined by Disney during the production of Roger Rabbit to describe going above and beyond what was expected of the animators.

It would’ve been perfectly feasible if Roger stayed flatly illuminated throughout this scene like a cartoon normally would, but instead the animators put in the time to shade every cell uniquely so that the practical light would bounce off from the same way it would a physical object.

And they had to account for that dynamically shifting lighting with every contour in Roger’s limbs, his clothes, his face, the cast shadow he creates on the environment as well as the texture of the light, the slightest difference in color temperatures, the lamp sways… even Roger’s ears have a slight translucency, since they’re much thinner than the rest of his body. They thought of that.

Audiences had no expectation for this level of realism in 1988, but all these seemingly-superfluous details help sell the effect at a subconscious level.

“Bumping the lamp” can be seen on two interlocking levels: one that focuses on the quality of the output (as above), and one that focuses on process toward personal mastery of craft.

On that second level, here’s an anecdote from the original Mac team, a few years earlier:

One day Burrell started doing something radical. Andy came by my cube and said “You’ve got to come see what Burrell’s doing with Defender.” “How can you innovate with a video game?” I wondered. I’d seen Burrell and Andy innovate on all kinds of things, but I couldn’t image how he could somehow step outside the box of a video game - the machine controlled the flow and dictated the goals. How could you gain some control in that environment?

We started up a new competition, and when Burrell’s turn came up, he did something that stunned me. He immediately shot all his humans! This was completely against the goal of the game! He didn’t even go after the aliens, and when he shot the last human, they all turned to mutants and attacked him from all sides. He glanced in my direction with a grin on his face and said “Make a mess, clean it up!” and proceeded to dodge the swarm of angry mutants noisily chasing after him.

I am neither a good visual/​motion person, nor a great gamer. But I recognize this desire to once in a while walk up to a pool and throw yourself into a deep end of it, out of principle. Sometimes when I start a new project, I choose a different framework or method I haven’t used before, just so things are harder. On Aresluna and here on Unsung, I very deliberately chose “no centering” as an arbitrary principle, just to push myself to embrace the – harder, but more rewarding – asymmetry, and see where that takes me.

I am sharing this just after I shared the other maxim because I believe in those more that I believe in style guides or design principles coming “from above.” I see craft blossom when it can flow from individuals, and when the organization and attendant processes recognize that. Let people bump the lamp, make a mess, feel certain way about weird things, and do other things – and then let others observe, learn from that, and share the strange rituals and arbitrary rules that make them try harder when no one’s asking for that.

Thanks to Jon Wiley for sharing the original video.

“Animating something and animating something well are two very different things.”

From Jakub Krehel, a new blog post about self constraint in the era when AI makes it easy to ignore constraints altogether.

My caveat is that the post doesn’t fully come together for me – jumping from AI to animations and then back to AI the way the author did does not feel cohesive.

At the same time, in the middle of the post, there are some nice examples of animating juxtaposed with overanimating that caught my attention. We talked about sugar and juice before, and this adds to that conversation. Here’s one example:

Not all animations need to be wholly meaningful and functional – just like not all graphic design, iconography, and typography have to be – but part of growth as a designer is knowing how to limit your budget of “superfluous” stuff even if no one else tells you to, and then how to spend that budget really, really well.

“They had the simplest task in the world.”

This is a really nice set of transitions when pinching in and out in Photos in iOS 26.

This is trickier than it seems, because it’s not just a linear zoom (like it would be in Maps or Sketch, for example). It’s a zoom and reflow – from 3 items to 1 item per column – which makes things a lot more complicated.

Here are a few nice details about this transition:

  • It reacts to your fingers rather than being a rigid transition with a fixed duration.
  • It always prioritizes the photo you’re pinching in and out, assuming that’s where you look.
  • It smoothly transitions the aspect ratio (from always square when the items are smaller, to native when items are bigger).
  • It crossfades the other photos. Cross-fade is the “cheap” answer for transitions, but here it feels appropriate, as it happens in the periphery – actually trying to move the other items linearly between their respective positions would feel unpleasant and distracting.
  • In contrast to the other transitions, these crossfades are not fully tied to fingers, meaning you cannot stop in the middle of a crossfade.

Nikita Prokopov on his blog published other examples of problematic transitions, and it seems most of them are struggle in the same way, as transitions that cannot simply be linear. The above transition in iOS shows it’s possible to do it well if you care.

And it’s not just about smoothness or nice feelings. Prokopov:

[…] Desynchronization can lead to a lot of confusion. For example, in Photos, when switching between Crop and Adjust mode, picture snaps into place immediately but the crop border is animated.

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. I want it to be a precise instrument, not an animated toy.

The above iOS transition feels very precise to me.

Shallow breathing

Turns out that the breathing light survives, sort of, not really, in an Apple product today:

The AirPods Pro case does this when charging – right at the start, or when you tap it later. But it disappears after a while, the pace is now 28 breaths a minute (over twice as fast as the original iteration), and the light is orange.

Is it still the same thing, reflecting on how smaller organisms breathe faster? Or is it mostly an unrelated idea, with the light fading in and out indicating activity rather than lack of it? My money is on the latter – the light turns white when pairing, too, and it cycles even faster then – but it was nice to imagine the return of the old feature for a second or two… or 2.1, to be precise.

“This is where your mouse becomes a cryptographic instrument.”

A fascinating 9-minute video from PawelCodeStuff about randomness in the context of computing:

It explains those weird moments where sometimes the computer asks you to wiggle your mouse – to generate unpredictable numbers – although the specifics of what exactly was random in my wiggling was a surprise to me.

There is something poetic about computers yearning for that one thing they can never get – complete unpredictability – and collecting it in a little pool like you would something very precious. Also fascinating that in modern CPUs, there now exist hardware components that gather truly random data from the real world.

While I have never needed true randomness in my design career, knowing how to control pseudorandomness (specifically, how to replay it) has been helpful.

Here’s an example. In my essay about Gorton, there is this interactive bit where you can drag a slider for “messiness.” With regular pseudorandomness, the experience is wiggly and gross:

But when you always restart the prng from the same seed (“the Groundhog Day maneuver”), it feels much better:

User interface sugar crash

I think about some aspects of interface design as sugar.

This is how you adjust the photo in Photos app in the previous version of iOS:

And this is the same view in the current version:

The difference is in the delayed/​animated falling of the notches.

I don’t think it’s great. It’s “delightful” in a rudimentary and naïve sense, but like sugar, you cannot just add it to your daily diet without consequences. This extra animation serves no functional purpose, and the sugar high wears off quickly. What remains is constant distraction and overstimulation, the feeling of inherent slowness, and maybe even a bit of confusion.

It pairs nicely with the previous post about avoiding complexity and rewarding simplicity. I often see this kind of stuff as related to designer’s experience. Earlier on in your career, you are proud you’ve thought about this extra detail, you’ve figured out how to make this animation work and how to fine-tune the curves, and you’ve learned how to implement it or convince an engineer to get excited about it.

Later in your experience, you are proud you resisted it.

“It’s beautiful and kind of mesmerizing.”

I’ve learned recently that “rubber banding” can mean at least three different things in the context of UI/UX design:

  • whatever happens at the edges of your scroll container when you’re using elastic scrolling, which started on the first iPhone and have spread more widely since
  • in videogames, balancing the difficulty in real-time so that inexperienced players stand a chance and good players are not bored (a classic example in any racing game is computer-controlled cars slowing down if they are running too far ahead, as if held by a rubber band, to give you a chance to catch up)
  • in multiplayer experiences (mostly videogames, too), the experience of snapping back and forth (example) during gameplay when your connection speed is low and the game has to reconcile your predicted position with your real one

Each one is interesting in its own way. (Each one is also controversial, although for a different reason!) But what I understand they all have in common is – well, obviously – the specific mechanics of rubber banding.

I imagine many reading this are familiar with basic interpolation between A and B using curves like ease in, ease out, and so on. But in gaming and I think increasingly in UI design, that’s not enough. When coding stuff related to movement – imagine dragging an elastic scrolling view near its edge – the challenges compound:

  • the object might already be in motion
  • its destination might also be in motion
  • the load or framerate can vary, so calculations have to take that into account

With that in mind, I found these two videos helpful and informative:

The videos together start with basic lerp (linear interpolation), then move to lerp smoothing, and then arrive at frame-independent lerp smoothing. There’s light math/​physics here, but that’s to be expected, as all these experiences are meant to feel like real-life objects would.

I found especially lerp smoothing where you feed a lerp into itself particularly conceptually beautiful.

Three iOS 26 transitions

This first one – in response to pressing the volume buttons – feels world-class. Subtle responses to buttons being pressed, nice haptics, good physics:

This one – stretching of the control center – made me incredulous. The performance and physics of it all are good and fluid, but this feels like absolutely the wrong thing to do here. I think it’s as designed, but it feels buggy to me. Maybe I’m oversensitive to stretching type and shapes like this, but I can’t stand how icky it feels. I am not sure I have seen another place in iOS 26 where elements would stretch in such a cheap way:

And this one – tapping on the album cover to make it show and hide – is bad in perhaps every possible way. It feels designed poorly and engineered poorly, like an HTML approximation of a real thing. All sorts of bad curves and sudden switches, slight reorientations of UI, even some flickering of interface elements at the bottom. It feels so rough I would probably just do a hard switch, no transition, until I got this right. After all, no animation is better than bad animation, and this is not responding to fingers in real time (when the user controls the “speed,” and you absolutely need a transition):

Ultimately I don’t know if this is “as designed,” or rushed, or what are the causes. But It’s interesting and a bit hard to realize that these days even animations in iOS 26 – once, I believe, a staple of good design and execution – are all over the place.

A Japanese word for “cat”

When I was in Hong Kong a few months ago, I noticed that a lot of intercoms have this particular animation of a cat sleeping and chasing a fly, on a loop:

It was actually kind of fun to see it all over Hong Kong on LCDs of varying quality.

Turns out this was Neko! A “screenmate” application from the late 1980s that made its way to various software platforms and apps since.

I liked the idea that somewhere in the intercom factory someone wanted to add a little delight to a very pedestrian (no pun intended) surface, and that’s why now we have Neko all over Hong Kong.

(I liked it so much I recreated it and added to the bottom of my site.)

“Strangely primitive against the backdrop of the slick user interface”

Forgot about this cute little story:

It used to be that when you dragged an item off the Dock and dropped it, the icon would disappear in a puff of smoke and make a satisfying noise. The animation was strangely primitive against the backdrop of the slick user interface of what used to called Mac OS X.

I too wondered why that animation was weirdly amateurish, almost like a placeholder. Well,

One of the most talented engineers on the team took out a piece of paper. I wish I could say it was a napkin to make the story better. ¶ On the piece of paper, he drew a series of five frames. The intention of the designer was that these drawings would stoke further discussion. That it would get cleaned up and refined later. ¶ But that never happened. It shipped as is. And the rest is history.

Also when looking it up, I found a mention of a fascinating bug that exposed the origin of the animation as a sprite.