Suggestion: Implement CSS View Transitions

[aia]

View transitions are a great way to make websites and web apps feel smooth and pleasant to use.

This feature is now available in major browsers and will soon be added to others. It's also a progressive (non-breaking) enhancement, meaning we don't have to wait for universal browser adoption. Users of major browsers will immediately notice the difference, while users of other browsers won't experience any change until their browsers are updated.

Also, the good part is that some generic transitions can be implemented with CSS alone, without any JavaScript. JavaScript is optional for very specific cases but not mandatory at all.

For more information on how view transitions work:

• General description: https://developer.chrome.com/docs/web-platform/view-transitions
• Specifics for multipage applications: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document

[Ehren]

Thanks aia,

View transitions are actually used in the "drag header elements" feature in the v5 Theme Editor (they create the subtle reordering animation).

In terms of cross page navigation, I'd need to find areas where this would actually make sense and benefit the user, instead of adding it just for the sake of an animation. Depending on the goal of the animation, we'd potentially need to scatter the page with view-transition-name properties which isn't super ideal.

They're great for dynamic DOM updates where elements are repositioned, but that doesn't happen too often with our software.

So I guess my question is, what areas did you want transitioned exactly?

[aia]

I mean cross-document navigations, the CSS View Transitions Module Level 2 spec. View transitions when navigating between different URLs.

As a starting point, you can simply add this simple CSS rule:

@view-transition {
  navigation: auto;
}

and observe how it affects the look and feel when you switch between pages. It immediately becomes smoother, less jumpy, etc.

The other details (exact animations) are depend on designer preference