Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- This is the kind of things that bother me when using software and unfortunately almost every software is affected.
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.
by flyingshelf - I think a lot of these are because Apple has built animations into their products as first-class citizens, but that means that they need to somehow figure out how to compose them well. (Which obviously is a rather difficult problem to solve!) In my experience, you end up spending a lot more time trying to get all of the animations to work well together than you do on creating the actual UI, and that time is just not worth it if your start and end states are beautiful and intuitive. There's also the cross-UI-framework tax that has come up since Apple has allowed mixing SwiftUI and (App|UI)Kit, and animations are part of that.by jadar
- I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times".
Old Apple knew not to overdo things.
by ezst - This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.by hankbond
- Or if the author mocked out what each of the bad examples should look like if done properly.by jastanton
- I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made.
If you're curious, you can see it here: https://www.thisischris.dev/projects/project-6/
by seemack - An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place.
I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
by satvikpendem - An app with no animations feels awesome. It's great and it doesn't take my brain any time to process what happened since I already knew what was going to happen when I press the button that makes things happen on purpose.by lynndotpy
- It's jarring to see instant changes that don't make sense. Animations are primarily a way to paper over UI that sucks to begin with.
Many transitions in Android are perfectly fine at 0x animation speed. The majority of transitions that suck without animation suck because the pre-/post-transition layout sucks and the transition between the two states doesn't make sense as a result.
It's the same with several of the transitions in TFA. For example, the address bar placeholder text[1] should just be left-aligned all the time. The save dialog[2] should leave all the basic controls in their original location[3] when switching from the basic mode to the advanced mode. That means the "Where:" label should also remain in the advanced mode, and the controls[4] that pop up to replace it should either be moved to the right or below. The search bar should also be moved down.
These are some really basic details and it is my understanding Apple used to not screw them up nearly as badly.
[1]https://tonsky.me/blog/every-frame-perfect/safari@2x.mp4?t=1...
[2]https://tonsky.me/blog/every-frame-perfect/save@1x.mp4?t=178...
[3]https://imgur.com/ZpHLCsv Artist's rendition. Please excuse the minor jank and criminal amount of empty space; I couldn't be arsed to fiddle with the screenshots to get pixel-perfect positioning and shrink the advanced dialog horizontally. Bikeshedding over where exactly the new controls belong is welcomed but irrelevant to the point I'm making.
[4]Is it just me, or are their icons uselessly, impenetrably, unhelpful?
by snackbroken - Give it one day and you won't come back to those sluggish animations slowing your intent down.by ivanjermakov
- After using Android for like a decade, I eventually succumbed and got a iPhone 12 Mini (back when it was new). I still miss the ability of turning off animations as I could do on Android, and I'm 110% my current phone would feel 200% faster if I could just turn off every damn animation that just exists to exists. I'd much rather have a second to process if that's needed (which I don't think it is), than being slowed down by one second every time an app changes the page, everything feels like molasses when you navigate around.
- All animations are just wasted time while you can't properly interact with the UI, it's much better to just turn every one of them off.by saati
- I have mine at 0.5x.
The problem with 0x is that it seems to only affect like 90% of the UI. Certain things still animate, and the cadence feels awful as a result.
At 0.5x the stuff that's mysteriously unaffected by the animation speed setting isn't as jarring.
I would use 0x if it worked properly.
by ryukoposting - Not for me, I always turn off animations. It feels fine for me, and I can operate the phone a lot quicker without having to wait for animations to complete.by yellow_lead
- I'm a happy user of android with animations turned off. It's the only mean to make it somewhat "snappy". IMHO lag is always worse than lack of fancy transient state in input -> UI change context.by bvrmn
- Would be nice if there were some _positive_ examples to go along with all of the negative ones. All I’m really getting from this is that I should avoid animations, which I don’t think is what the author is actually trying to say.by namuol
- > All I’m really getting from this is that I should avoid animations
Wouldn't be the worst takeaway from the article. You should avoid animation for animation's sake in general. Imagine if we animated letters flying up from your phone's keyboard into the text field as you type them for example.
by akersten - 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.by naet
- Agreed!
With MacOS I felt there was a major quality change for visual quality & animations when SwiftUI was used BY Apple for the OS and applications.
I'm not a developer, but it felt there were areas where an icon or window just didn't visually work the way it used to or SHOULD in placement or animation.
The hackish-ness hasn't changed over time: there are so many examples throughout the OS/Applications that I want to say "it was always like that", except it wasn't: Apple set the bar and it was high, the quality was exceptional.
I feel there are a lot of hacks going on with SwiftUI to achieve the same UI placement or animation.
Last quick note I think about often: a lot of analog creation was really hard. It still is. When it comes to digital we've been thinking we'll come back to things later, but never do... we build more bad on top of bad... sadly.
by sanjit - The game Overwatch is a pretty great contemporary example of this [1]. It has some excellent fluid animations, which look really weird if you freeze frame them.by DavidVoid
- Smear frames are not something often applicable in this kind of animation. Smear frames are just about specific to frame-by-frame animation. No smear frames are demonstrated in this article.by jdiff
- 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.by ryukoposting
- Yeah the difference is that the blur frames are deliberate and purposeful for the overall effect. The animations showcased here are accidental jank that reveal a clobbered together unpolished app.by akersten
- I've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them.
For anyone curious, https://www.thisischris.dev/projects/project-6/
by seemack - Great article! We’ve become so accustomed to UI jank these days…by archagon
- Ty but the animations don't seem to animate on mobile chrome on Android.by Tyr42
- I'd rather have an imperfect frame now than a perfect frame later. Latency should be the top priority for any UI, because when latency is low enough it feels like a part of your own body, which minimizes cognitive load. Animation is especially bad for this, because animations add hundreds of milliseconds of latency.by mrob
- You might have thought the title was about Wayland and you're right. But this isn't about Wayland.by inigyou
- I think that's a false dichotomy. The examples the author gives would not be slower in any way if done correctly.by cloogshicer
- I have a lot of thoughts about this:
I think this is a weakly presented argument. The article doesn’t actually present stronger alternatives or even why anything shown is negative to the user. It might be negative but otherwise this is the same vacant critique that is levied by pointing at smear frame or transitional points in media to critique it.
The user also has an untenable maxim. Every frame must make sense? I would posit this is impossible, or I’d ask the author how they’d handle window resizing while keeping every frame perfect.
I also think the author themself finds it easier to point out flawed frames (again without actually explaining why they’re issues) than doing as they say. Tap the header links on their blog and see the animations play after the click is complete. Or go see their own UI projects and see how text and objects don’t stay within their containers. Surely someone saying that this is a tenet that should be followed could demonstrate it themselves.
I think this is just a very hollow critique on their end.
A more competently written article would have focused on why anything shown is bad for the end user, and how they might handle it instead. A good critique should actually include some substance and point to more than just the what, but the why and how.
by dagmx