9 ms·

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 di

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

manuelmoreale 4y ago
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.
TheFragenTaken 4y ago
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.
- lavela 4y ago
  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.
antigirl 4y ago
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.
jwr 4y ago
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.
- p_l 4y ago
  Try going to accessibility settings and switching "reduce motion" on. Doesn't get rid of everything but makes for less annoying experience.
  - bobbylarrybobby 4y ago
    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.
    - p_l 4y ago
      At least perceived amount of delay is lower. Sometimes it's the little things that help.
  - jwr 4y ago
    This option does not remove the animation.
- fathyb 4y ago
  To make it worse, there is a bug with their flagship 120 fps displays making this specific transition run 2x longer.
  - GRiMe2D 4y ago
    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
    - 243423443 4y ago
      That doesn't work anymore. At least in Ventura.
    - rpastuszak 4y ago
      I remember that. What was the purpose of it?
bayindirh 4y ago
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.
holoduke 4y ago
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.
jorvi 4y ago
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.
agumonkey 4y ago
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.
- ImaCake 4y ago
  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.
  - agumonkey 4y ago
    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.
  - rchaud 4y ago
    the HN user's everyday carry: Rsync Emacs NoScript
mike_d 4y ago
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.
- dezmou 4y ago
  same here, and when you must add something like react-router, it become more and more hacky
- saurik 4y ago
  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".
  - mike_d 4y ago
    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.
    - silvestrov 4y ago
      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".
samwillis 4y ago
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.
jeroenhd 4y ago
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.
jefftk 4y ago
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.
osrec 4y ago
Disagree. Transitions can help to convey meaning when used appropriately.

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

manuelmoreale 4y ago

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.

TheFragenTaken 4y ago

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.

lavela 4y ago
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.

antigirl 4y ago

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.

jwr 4y ago

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.

p_l 4y ago
Try going to accessibility settings and switching "reduce motion" on. Doesn't get rid of everything but makes for less annoying experience.
- bobbylarrybobby 4y ago
  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.
  - p_l 4y ago
    At least perceived amount of delay is lower. Sometimes it's the little things that help.
- jwr 4y ago
  This option does not remove the animation.
fathyb 4y ago
To make it worse, there is a bug with their flagship 120 fps displays making this specific transition run 2x longer.
- GRiMe2D 4y ago
  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
  - 243423443 4y ago
    That doesn't work anymore. At least in Ventura.
  - rpastuszak 4y ago
    I remember that. What was the purpose of it?

bayindirh 4y ago

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.

holoduke 4y ago

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.

jorvi 4y ago

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.

agumonkey 4y ago

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.

ImaCake 4y ago
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.
- agumonkey 4y ago
  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.
- rchaud 4y ago
  the HN user's everyday carry: Rsync Emacs NoScript

mike_d 4y ago

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.

dezmou 4y ago
same here, and when you must add something like react-router, it become more and more hacky
saurik 4y ago
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".
- mike_d 4y ago
  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.
  - silvestrov 4y ago
    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".

samwillis 4y ago

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.

jeroenhd 4y ago

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.

jefftk 4y ago

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.

osrec 4y ago

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