Hacker News Reader

Comment by collaborative | Hacker News Reader

After years of using transitions I concluded that there is nothing better than a static (non) transition. Heavy usage of apps/sites with transitions leads to dizziness

View on HN

I disagree. I like the way YouTube and some apps use motion and quick transitions to indicate which UI components have moved where. The example transitions are way too slow, but I imagine that's intentional to show how the animation paths work.

This should only apply to major components of the UI (such as a video player, or a document, maybe a toolbar that slides to the side of the page), or course. When done well, this makes navigation much more intuitive inside applications.

Every mobile operating system and most desktop operating systems already employ these transitions in their normal use. Most people will only perceive them when they're in the way, but when they're part of a well-deigned UI flow, you probably won't even notice they're there.

I've run my phone with animations disabled for a while, but apps feel much clunkier and broken when all animations disappear.

Even when a page loads quickly (<50ms) and suddenly all the controls and views are somewhere completely different, I need to scan the page again to see where everything went. If I can follow the controls with my eyes, that makes navigation much easier.

If this does get implemented, I expect you will be able to turn these transitions off just like you already can in (mobile) operating systems and some browsers. In fact, if you've already set up your OS to reduce movement, I expect you'll never even be able to see the features being introduced.

They also slow things down. This can be unacceptable for power users, who just want to "get things done". As a practical example, I can't use Apple's "spaces", because they force me to sit through an animated transition when switching between screens/workspaces/whatever. It's fun the first time, but gets really old after a hundred or so.

Try going to accessibility settings and switching "reduce motion" on. Doesn't get rid of everything but makes for less annoying experience.

On apple devices, reduce motion generally just replaces the motion in the animation with a fade in-out. The transition still takes the same amount of time.

At least perceived amount of delay is lower. Sometimes it's the little things that help.

This option does not remove the animation.

To make it worse, there is a bug with their flagship 120 fps displays making this specific transition run 2x longer.

It’s not bug, it’s feature. You can hold SHIFT while transitioning and it makes slower.

Try CTRL + SHIFT + Left arrow (or right arrow) right now, if you use spaces

That doesn't work anymore. At least in Ventura.

I remember that. What was the purpose of it?

back in the day I think this was there to showcase the animations. I remember steve used it on stage. not sure why it was kept

You can try these tweaks to speed the animations up:

https://apple.stackexchange.com/a/253800

Those are all very out of date. Most of them don't work anymore.

100% agree, esp. for power users, but thoughtfully applied transitions can in fact improve the perceived performance. “Thoughtful” is the key word here.

I wish we could just disable transitions completely for spaces, instead of falling back to the crossfade effect.

> They also slow things down. This can be unacceptable for power users, who just want to "get things done". As a practical example, I can't use Apple's "spaces", because they force me to sit through an animated transition when switching between screens/workspaces/whatever. It's fun the first time, but gets really old after a hundred or so.

That's how I feel about MacOS virtual desktops.

You used to be able to configure it so that there was no animation, but they removed that options a while back.

I believe you may have missed the broader "Reduce motion" accessibility feature that is still in macOS as of v13 Ventura: https://support.apple.com/guide/mac-help/reduce-screen-motio...

Or have you already found this option doesn't help you with your specific issue?

> Or have you already found this option doesn't help you with your specific issue?

Just tried it. It exchanges a "slide" animation with a "fade" animation. But it still takes ~1/8 of a second.

This option does not remove the animation.

When I got my first color inkjet printer (an HP Deskjet 500C), it came with a booklet called "A guide to using color". That little booklet outlined using color in documents without being over the top and for adding more information rather than haphazardly "decorating".

I still keep that document and revisit from time to time.

I think we need a respected global UI/UX best practices document open for everyone, not unlike MDN.

This is targeted at SPAs, not general web browsing. I've been working on using chrome as a render for a video kiosk type setup, and this feature was exactly what I needed to smoothly do scene transitions. The alternative is to do a bunch of hacking to preload the next batch of content, try to figure out when it is "dom ready" and then use CSS transitions to bring it in.

same here, and when you must add something like react-router, it become more and more hacky

I think the point of the comment you are responding to was that: no, in fact, the transitions you are talking about would be better off not existing. Like, I watch that video of the UI with all the pieces of that "app" sliding around and I'm thinking "omfg that's annoying and disorienting and will get old extremely quickly".

Yeah, and I think that is an incorrect view based on a limited perspective of elements where the user is directly interacting.

What I was talking about using the feature for is passive content. Watch any TV news broadcast, popular Twitch stream, etc. and you'll see that elements or scenes transitioning smoothly is the polish of a good production. A news ticker doesn't just appear, it has a 1 second fade in. The logo isn't always on the screen, it slides in and out periodically from the right.

The problem is that people overdo the transitions when they add them (i.e. make them too long).

This "overdoing" always happends when something new is introduced.

When Windows became able to use multiple fonts in the 90'ies, people used as many fonts as possible on a single sheet of paper. It looked really bad. Over time we got back to use 1 or 2 fonts on a page.

When web got animated GIFs, every page had an animated "work in progress".

There is no point in talking about these things in absolutes. Sure, animations can and often times are overdone, but done well they are extremely useful and gives you just the right context on what happens/happened. We are visual creatures who build up a mental model not based on static images, but dynamic interactions. That hover, or overscroll animation gives you essential additional information.

Agreed. The best animations "mean something". As in, if a page swipes left in a transition, it should be to indicate to the user that they're moving forward in a workflow, and the reverse, backwards. Up/down imply the same, but within the same step. If you're in the Western world[*], this can feel very intuitive.

I'm the static HTML type, but one can really smooth out their UX with animations and transitions.

[*] where reading is typically left-to-right

Having an API for this is, a bit counterintuitively, good for people who don't like transitions: it means building an extension that turns them off is easy. If websites are implementing transition animations on top of other browser features it's very hard for an extension to recognize them, but not if there's a standard API.

There's some strange backfiring effect where the more presentation capabilities there are, the more I miss the static/dense/minimal presentations of the 80s.

Presentation helps discovering or ramping up to a domain but then your brain goes over that hump and you only care about high density of information.

HN users might be self selecting for this bias towards a dense static design. 1. this website meets those criteria, 2. tech orientated people are power users who prefer the UI to get out of the way.

I don't think I'm that different to the average user. Maybe just more mileage but anyone can evolve and realize what was cute and enjoyable is not required anymore.

the HN user's everyday carry:

Rsync

Emacs

NoScript

I think this comes down to the issues of transition animations or badly implemented ones.

Animated transitions can and do add value where there is a contextual reason for them. You have animations on objects appearing, disappearing or moving, all are different.

- Appearing objects: If you have just clicked or taped something you already know where it is coming from, a very quick animation is what you want at most. Get it on screen quickly.

- Disappearing objects: Again get it off screen quickly, thats what I asked for. However, if for example its "just of the side" (like minimising a window to the Mac Dock) then an animation gives you contextual information of where it is now, so you can bring it back.

- Moving objects: This is where there is the most value in my opinion. It gives you the context of where something has moved to. On iOS safari for example when you tap the bottom right show tabs button, the animation indicates where the previously open tab in in the list, but there isn't an animation for the other tabs appearing, you see them instantly. It's subtle but very effective.

I think a good general rule of thumb is to get new stuff on screen quickly, if I clicked it I know where it's coming from so it really doesn't need a "slow" animation. Moving stuff, show me where it's moved to, thats a good place for an "contextual" animation.

Thank you. I feel less lonely now because I also think page transitions in the majority of cases add nothing but confusion to a site. There are exceptions of course.

I agree. The only usecase i see for a transition animation is the backsliding effect on Ios when you slide back a page. Forward navigating should imho never have an animation. It must show the page in less than 50ms.

I am usually the kind of person to increase the animation speed on my phone too, and I think (while it looks impressive), the example is pretty sluggish to me. But I think, for PWA's this is a huge step-up, as you for example can mimic the backwards-swipe behaviour for page navigation.

It would be great to have an 'rem for css animations' where you don't specify your transition times in seconds but in fractions of a base unit, which might default to 1 second, but can be changed in your browser settings similar to your base font size.

Disagree. Transitions can help to convey meaning when used appropriately.

Thankfully I don’t suffer it myself, but due to the way that transitions work in regards with FPS and monitor blanking, they are the same trigger of migraines that fluorescent lights are.

these are just extravagant examples. Optimistic UI updates work best. I don't click links that open/load a fresh new page unless absolutely necessary as theres cognitive resistance stopping me from doing it.

Reply on news.ycombinator.com