SPA view transitions land in Chrome 111 (opens in new tab)

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.

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.

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.

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.

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.

I don't agree with the common complaint that transitions and animations are just aesthetic fluff. Done right, they give the user additional feedback as to what's going on, e.g. in the example announcement, zooming in on one particular video making it full-screen.

This might be less relevant to power users, but imagine someone accidentally clicking somewhere and suddenly facing a full-screen video. With the transition, it's at least clear what action is happening. It's similar to buttons indicating their state (hovered, pressed, clicked).

The main reason animations can get annoying is that people don't get the timing right (too slow), or really just use them to show off. Some even use transitions to gloss over the slowness of their system, which is infuriating.

I always found HN users hating new trends in the user interface design industry, like white space and transitions.

Is that anything to do with our users' age group?

When one company, that has a culture of incentivising new features over maintenance, has monopoly control over the web you get a lot of new features. The merits of those features is somewhat irrelevant.

No transition takes five seconds intentionally. What you may be seeing is artificial delay, something introduced to a system to give users more confidence that the system is working correctly. Instant responses for operations perceived to be complex cast doubt on if the operation was done correctly.

Either way, you can disable transitions on your OS already if you dislike them. In fact, you should see this as an improvement to the current situation, as transitions bound to OS animation preferences instead of jQuery .animate() will suddenly disappear for you.

Give developers a standardised interface they can use and they'll use it; give users settings for those interfaces and you can make applications work like you wish with the click of a button.

I suppose one advantage here as that it is might be possible to disable with a userstyle for power users.

What an uncharitable view of an entire profession. Is this really HNs attitude towards UX/designers? That if it weren't for them, we would have perfectly usable and fast apps?

Hopefully it will just replace those .animate in jQuery with a technically better solution

Not if it breaks old web pages out there. It's nice that we can still browse websites that haven't been updated for a decade or more.

Did you ever think about, that people may need some of the features you consider useless?

Such as?

> You make the change and DOM elements from before can still be visible during the animation.

Based on my reading of the docs the API gives you a static screenshot of the old DOM and the live new DOM. So if you have any dynamic content on the page it freezes during the transition.

That's pretty cool, and I wish we got that in the description.

I suspect it'll be a few years before this is stable enough to use though (people will continue with the existing javascript-assisted exit transitions until then)

I wonder if people will even be using this generation of SPAs at that point, or if we'll need something else by then.

Reminds me of the powerpoint page-transitions that IE5 supported.

<meta http-equiv="Page-Enter" content="revealTrans(Duration=*,Transition=?)">

This wasn't as much a browser feature, but an artifact of Microsoft using the same mshtml library to power as much of the system as possible in Windows 98 (IE, Explorer, the Office suite, etc). If I remember correctly one of the selling features of Powerpoint at the time was the ability to export to HTML for "portable" presentations.

The first thing in the article is a video.

I just think it looks neat. I first saw this animation demonstrated by chrome team years ago in some developer conference video, and have been searching whether it's done every couple of months since then.

Sure, if you make seconds-long animations on every interaction, or implement this for blog posts, it's going to be unusable.

But for web apps, short animations in UI transformation make it feel more... held together I guess. Consistent. I like it.

I think it's the motion curve and the slow animations. Faster transitions and a rounder motion curve may just fix the problem, I believe.

The YouTube app has the same types of transitions but there it all feels a lot smoother.

Almost certainly GPU

The transition masks load times as you interpret the movement as interaction.