Animations can make a website more engaging and where it’s related to a brand or product it can make the visit more memorable.

However when it comes to webpage animations I’m sceptical about a use-case for them. I get that it can be nice to see something happen when you hover or click an element but overall I’m not sure that it adds anything to my knowledge-seeking experience, being that is my prime use of the internet. But I’m not everybody. I spend a good deal of time looking at my screen during the day, and don’t want to be distracted by content loading from the left and right of the screen as I scroll down, or even to see the background gently drift upwards.

I have been given the view-transition rule to dissect. So I wondered whether it would change how I feel about how my content loads.

What Is @view-transition?

The @view-transition at-rule lets web pages enable seamless visual transitions between documents. Essentially, it allows for smooth animations when navigating between pages of the same origin using only CSS. The easiest way to implement this is by setting the navigation descriptor to auto on the pages where you want the transition effect to occur.

@view-transition {
    navigation: auto;
}

 

The standard effect achieved by this is a crossfade. This feature is not baseline, and according to Mozilla it currently works on all browsers except Firefox, though check the version of browsers that it will work on.

Great but what does it actually do?

What it means when we talk about this View Transition is that when navigating between pages of a website, we can make that transition less jerky, the content smoothly fading from one page to the next. I guess the site would have to load quickly to benefit from this as poorly optimised pages will have other issues to deal with aside from how nicely they animate when the user clicks a menu item.

I had some trouble getting this to work in YooTheme ( it doesn’t always work according to CSS Tricks: https://css-tricks.com/almanac/rules/v/view-transition/ ), but switching to a Gantry template in my Joomla development website and then copying the animation from Mozilla’s example page I quickly had navigation that animated pages loading with the content scrolling smoothly in a vertical direction.

Examples

Having got the basics to work, I wondered about what other transitions I could use. In this Let’s Build UI article they talk about fade and scale as options and using keyframe animation it’s possible to make a page move out from the old content and slide (with easing) the new page.

The crossfade

The scroll

Using the Mozilla example as my basis I switched one Y scroll to an X scroll, so a screen loaded on the Y axis and exited on the X axis, like a mobile app might work. Here’s a video of what happened when I navigated between pages:

 

Scale and slide

In another example I found scaling worked so a page would reduce in size before exiting off to the left of my screen.

The CSS

Here’s some example CSS showing how an animation could be controlled.

 

And after testing this on a desktop browser I was surprised to find that it even worked on mobile.

Whole Pages Or Just A Section?

Using transitions is something that probably belongs in the world of phone apps where we’re more used to seeing a modal appear by scrolling up, or unloading by sliding out. Though it looks like just some of the content is changing, we are actually loading whole webpages, as the navigation would do. The effect though can be more app-like.

Exceptions

Many operating systems have an option in the accessibility settings to specify a preference for reduced motion. We can use the media query prefers-reduced-motion to see if animations are desired:

@media screen and (prefers-reduced-motion: no-preference) {
	@view-transition {
	    navigation: auto;
	}
}

So while it’s possible to create transitions, it is controllable by users as to whether they display on their browser. It’s with a word of caution that this short article concludes by saying that transitions with animations may be possible, you don’t have to use them unless you have a specific use-case for it, and even if you do, it’s ultimately down to the end user whether they allow it or not.