Why are websites so poor in terms of transition & animation compared to native apps?

Question

It's 2020 and web standards allow for really powerfull animations. Compatibility is barely an issue since most browsers are evergreen and most devices are powerfull enough. On top of that, it's easy to just offer pregressive enhancement in this domain.

It's not new, we have been knowing for a long time that good transitions help improve context switching. It has been explained in lengths by renowned specialists, see:

• CSS Tricks
• Smashing Magazine
• Google Developers

That being said, I'm wondering why so few websites offer the kind of experience that is so common in mobile apps. I'm a developper, I know that following a link to another page triggers a full page reload, that's the default behaviour of the web.

On one hand, not all websites deserve a complex system to handle pages/views transitions. On the other hand, many smaller interactions that happen on page could use animations but don't. It often looks like they have been overlooked.

All this has obviously a cost, but some companies that can undoubtedly afford it don't always use them.

• Amazon barely animates their menu, and interactions on product pages are horrible (screen).
• Brands like Sephora and Assos don't even bother animating their menu (screen).
• Apple animates some stuffs, their menu for instance, but clicking the shopping cart, the pop-under appears out of the blue. Yet when they decide to animate, they go all-in, for instance the new iPhone SE showcase page is incredible (screen). They also offer a very decent experience when animations can't be done (screen).

I sometimes stumble upon amazing designs on Dribbble and see developers bringing them to life but it rarely reaches production on real websites. Yet, designers are very creative and real use cases are plentiful.

Think e-commerce shopping experience, this design would probably make me buy just because I'd get super familiar with the product taking time to configure it for my needs.

I can't help wondering why the web is lagging behind? Is there a real reason or is it just inertia due to old habits?

Answer 1

There are a lot of assumptions here and a lot of reasons on why, I'll try to break it down:

It's a historic thing

Animations as we know today, from complex Bezier-smoothed transitions to dialog pops are very recent.

Back in the day, in early computer software development with UI's designed on Delphi, Java and native, we had absolutely no animations(at least done easily), we had to deal with hardware acceleration in order to produce animations as we have today, that translates directly to giving the GPU/CPU manual instructions on how to animate something, while today we can just call transition: 0.3s; on CSS for example, we had to do manual complex matrix translations that could work on some machines.
And it wasn't worth it.
Maintaining something like that was a nightmare and we had no reason to do so, on regular software there was no reason(and time) to include visual jibber-jabbers since cases where a loading indication was necessary, a loading spinner would perfectly do the trick(of indicating that something is going on).
Keep in mind that at this point, we are talking about something that happened in less than 15 years back, so it's very recent.
On 2008-2010, animations started to come alive, check iOS 1.0 and Android 1.0, they had very limited animations, we had to work with hardware constraints, battery constraints and complex coding in order to achieve that, that's when animations started to boom, but here we are talking about mobile native experiences, you question is about the web.
The initial specification of the CSS animations was created on 2009 but it was only on 2011, 2 years later, that Firefox added the initial implementation for CSS animations, before that, we used JavaScript animations, that had the same issues as mobile stuff, compatibility and performance issues, keep in mind that fast super-charged computers are also very recent, and even now, a lot of people still don't have access to it.
While we had to deal with a constant evolving technology, we could include animations since it was easier, the abstraction level was raised to high-level languages and we didn't have to worry about low-level stuff anymore, but time, performance, compatibility and social constraints didn't allow us to delve deep. We had more immediate concerns.
At this point, we are talking about a 8 year difference from where we are now, it's the same age as a child.
So from a historic PoV, animations and fluid motion as we know now, are VERY recent, so adoption is still ongoing.
The specifications are also constantly evolving and shifting, there's always the risk of adopting and implementing something that could break or become obsolete in just a few months.

Do you really need it?

You mention Amazon product photo transitioning as a bad example, why is that bad? The information appears immediately on the screen, there's no delay, even minimal, this is ideal, there's no reason to make the user wait for something when it's ready. Some fading and easing would be nice? Yep, but that does not make the experience "horrible", animations are not mandatory, on the contrary, they should be used with caution.
If something does not use animations, that does not mean it's "horrible"(as you call it), sometimes, there's no need to, that involves usability and even the next topic:

Hardware/Software constraints

Let's take Amazon, as you mentioned, they barely use any animations, some of the reasons I can think of are:

• Compatibility: Did you know that roughly 6% of the US still uses Internet Explorer? Those are still possible customers for them, they just can't dump compatibility and force them to update, they won't if they haven't done it at this point. Also, most people hardly update their browsers, so the latest cutting-edge features could be not available, I can take an old friend for example, he's stuck on Chrome 35(2014) and refuses to update, because it just 'works'.
• Hardware limitations: I can't speak for the US since I never studied their market, but here in Brazil, there are A LOT of people using old devices like iPhone 5, last time I checked on my user-base, they summed up to 15%. For the same reasons of Compatibility, we can't dump those users, they still generate revenue, but we are forced to keep things compatible for them, this includes not forcing sluggish animations on their old hardware, this will make their experience "horrible".
• Maintenance: One could argue that you could make different versions for updated users and legacy users, but from a programming standpoint, this is hard to maintain, specially on a constant cross-platform development world, also, doing two versions would hurt layout and brand consistency. Not to mention the development costs.

TL/DR

• Legacy devices,
• Compatibility,
• Development costs,
• Historical reasons.

Answer 2

I'll admit up-front that I'm a bit of a "Luddite" as regards web-design: I generally dislike animations, and mostly prefer clean, simple designs. Having said that, I'll try to be as objective as possible...

There's an often subtle difference between having "intuitive page/view transitions" and "adding frills for the sake of it". Like so much of UI design (and many other disciplines), hard-and-fast rules are, IMHO, very rarely useful. Having guidelines is one thing, and some animations or the transform effects from the pages you list I can see being useful in some circumstances. However, that doesn't mean that they should be used in all cases. To pick two examples:

• As Nick LeBlanc's answer argues, Amazon showing product photos instantly is not – in my view – in anyway "horrible". If I'm browsing several possible purchases, I want to do so a speedily as possible. Having a delay – however short – while a photo fades-in, slides-in or whatever, is going to detract from that. The photos are there to assist the buying the decision, not an end in themselves.

  On the other hand, transitions on some kind of "photo presentation" site might well be appropriate. Here, the focus is the photos themselves. If (carefully chosen) transitions enhance the aesthetic of that experience, then they have their place.

• Consider the first example of your second link, Animated Scrolling. "Luddite" that I might be, I'll happily accept that judicial use of "scroll to destination" (instead of "jump to destination") can indeed be very useful to indicate you're looking at a different part of "the same thing", as opposed to "a different thing".

  However, their example – to me – is an almost perfect example of when not to use it. Even if all three sections ("Home", "About" and "Contact") are on the same page (something I have mixed feelings about), they are (in their traditional use) three different things. The user is (presumably) deliberately clicking on the tab (or tab-like) elements, and should not be surprised to see something different.

  Whether animated scrolling, or jumping is appropriate also (IMHO) depends on the nature of the information. As a programmer, I frequently visit language or API definition pages which usually contain links to other definitions. When I click those, it doesn't really matter to me whether the information is on the same, or a different page, I just want it displayed straightaway (so: no scrolling even if on the same page). For jumping around a continuous story, then – yes – the indication that you've jumped over parts of the story that scrolling affords can be useful. (With a note of caution that if the "jump" is above a certain length, it may be tedious to have it scroll the whole way: scroll enough to indicate movement, then jump to the final location).

Overall: even if all the technical reasons (performance, compatibility) not to use animations/transitions are (mostly) gone, that shouldn't mean adding them "just because you can". As with any other UX/UI decision, ask whether their use actually enhances the users' experience.