Pleasant UI Animations With Shared Component Transitions API (Half 2)

Within the first a part of this text, we lined Shared Component Transitions API (SET API) and the way we are able to use it to effortlessly create complicated transitions for varied UI components, which might often require a number of JavaScript code or an animation library to attain.

However what about clean and pleasant transition animations between particular person pages? That is most likely one of the vital typically requested options previously few years as a result of even with all of the frameworks like React and Svelte and animation libraries like GSAP and Framer Movement, transitions between pages are nonetheless actually tough to do.

On this article, we’re going to showcase same-document web page transitions generally present in Single Web page Purposes and speak about the way forward for the Shared Component Transitions API for cross-document (Multi Web page Utility) transitions. I’ll additionally showcase some superior React, Astro, and Svelte implementation examples from the dev neighborhood.

Notice: Shared Component Transitions API is at the moment supported solely in Chrome model 104+ and Canary with the document-transition flag enabled. Examples will likely be accompanied by a video, so you’ll be able to simply comply with together with the article for those who don’t have the required browser put in.

In case you haven’t checked out my earlier article on the subject, here’s a fast rundown of this thrilling new API so you’ll be able to comply with together with the article.

Shared Component Transitions API

With Shared Component Transitions API, the browser does a number of heavy lifting in terms of animations permitting us to create complicated UI animations in a extra streamlined approach. The primary a part of the API is a JavaScript operate that takes screenshots of the UI state earlier than and after the DOM replace and apples a crossfade animation:

const moveTransition = doc.createDocumentTransition();
await moveTransition.begin(() => {
/* Take screenshot of an outgoing state */
/* Replace the DOM – transfer merchandise from one container to a different */
targetContainer.append(activeItem);
/* Take screenshot of an incoming state and crossfade the states */
});

Simply by calling the beginning operate, we get a neat and easy crossfade animation between the outgoing and incoming states.

As you’ll be able to see, we are able to nonetheless navigate between the pages; DOM is up to date with the brand new content material, and the URL within the browser adjustments. We’re intercepting the browser’s default navigation conduct and dealing with the web page loading and DOM updates all by ourselves whereas we stay on the identical web page.

By simply passing the DOM replace operate as a callback to the SET API begin operate, we get a neat crossfade transition between pages proper out of the field!

With just some strains of CSS and JavaScript, we’ve created this stunning transition animation. All we needed to do was to determine the shared factor (merchandise picture) on a clicked hyperlink utilizing a page-transition-tag and sign the browser to maintain monitor of its dimension and place.

We get a crossfade animation on a shared factor on backward navigation free of charge as a result of the selector we used doc.querySelector(a[href=”${url.pathname}”] .card__image) runs on the present web page, so after we navigate again to objects listing web page the tag doesn’t get utilized and browser can’t match the shared factor.

If we need to have the identical animation on the shared factor when navigating again to the merchandise listing web page, we now have to use the tag to the proper picture factor within the grid after we fetch the contents of a goal web page.

Customizing Web page-Transition Animation With CSS

Let’s use CSS animation properties to fine-tune the crossfade and merchandise picture animation. We wish the crossfade animation to be fast and extra delicate, and the extra elaborate picture animation to be extra noticeable and have a pleasant customized easing operate:

/* Velocity up crossfade animations */
::page-transition-outgoing-image(*),
::page-transition-incoming-image(*) {
animation-timing-function: ease-in-out;
animation-duration: 0.25s;
}

/* Nice-tune shared factor place and dimension animation */
::page-transition-container(product-image) {
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-duration: 0.5s;
}

We additionally have to remember that some customers may favor looking the positioning with out the complicated animations with a number of motion, so we need to both flip them off or present extra acceptable animation:

@media (prefers-reduced-motion) {
::page-transition-container(*),
::page-transition-outgoing-image(*),
::page-transition-incoming-image(*) {
/* Or add acceptable animation alternate options */
animation: none !essential;
}
}

Crossfade animations now run sooner, and the sizing and place animation runs a bit slower and with a special timing operate.

On this instance, I’ve solely showcased code snippets related to creating web page transition and SET API. In case you are curious in regards to the full supply code or need to examine the demo intimately, be at liberty to try the venture repository and examine the demo web page.

Upcoming Cross-document Transitions

Correct Shared Component Transitions API help for MPAs continues to be a piece in progress, however we are able to get a basic thought of the way it’s imagined to work from a tough draft by WICG.

In same-document transitions, we might use pageTransition.begin(/* … */) operate to let the browser hold monitor of the DOM updates. As for the cross-document transitions, we have to run the transition request operate on the outgoing web page earlier than it’s unloaded and run the transition on the incoming web page as soon as it’s prepared.

The next code snippets are copied from the WICG draft:

// Within the outgoing web page
doc.addEventListener(“pagehide”, (occasion) => {
if (!occasion.isSameOriginDocumentSwap) return;
if (looksRight(occasion.nextPageURL)) {
// This alerts that the outgoing components needs to be captured.
occasion.pleaseLetTheNextPageDoATransitionPlease();
}
});

// Within the incoming web page
doc.addEventListener(“beforepageshow”, (occasion) => {
if (
occasion.previousPageWantsToDoATransition &&
looksRight(occasion.previousPageURL)
) {
const transitionReadyPromise = occasion.yeahLetsDoAPageTransition();
}
});

Shared Component Transitions API for cross-document transitions would additionally should be closely restricted for safety causes.

Framework Implementation Examples

In the course of the previous few weeks, I noticed some jaw-dropping examples of utilizing Shared Component Transitions API for web page navigation, added with progressive enhancement to varied frameworks like React and Svelte.

Including web page transitions with SET API in frameworks may be difficult. On this instance, we’ve had management over the DOM replace features, however this isn’t often the case with front-end frameworks. Hopefully, as this API will get correct browser help and traction within the dev neighborhood, frameworks and router libraries will comply with go well with and supply higher methods to combine Shared Component Transitions API in navigation.

So, I want to spotlight some superior examples of framework implementations from the neighborhood, particularly people who present reusable features and hooks.

React / Preact

Jake Archibald created an amazing video playlist instance utilizing Preact, TypeScript, and a customized web page transition hook. This instance makes use of a customized router implementation to use class names to the html factor to customise the animation and toggle various kinds of animation relying on the navigation route.

Astro

Maxi Ferreira carried out web page transitions equally as in our instance with Navigation API however with Astro and defined the method in nice element on prime of constructing a shocking film database app.

He additionally labored with Ben Myers on this superior guitar store instance with cool animations on each the guitar picture and merchandise background, which expands right into a full description background container. That is additionally instance of learn how to create elaborate however seamless and tasteful animations that add to the person expertise.

Svelte

Transferring onto Svelte, Geoff Wealthy constructed this neat fruit dietary information app and defined the entire course of in nice element in his article. SvelteKit has a built-in navigating retailer, and Geoff created a helpful util operate for intercepting web page transitions and making use of the Shared Component Transitions API relying on its browser help.

Conclusion

Shared Component Transitions API permits us not solely to implement complicated UI animations on a element degree but additionally on a web page degree. Identical-document transitions in Single Web page Purposes may be carried out immediately with progressive enhancement, and we are able to obtain spectacular app-like web page transitions with just some strains of JavaScript and CSS. And all that with out a JavaScript animation library! Extra in style and extra complicated cross-document transitions for Multi Web page Purposes are nonetheless a piece in progress, and I can see it being a large game-changer as soon as it’s launched and good points wider browser help.

Judging from the spectacular examples we’ve seen on-line, a few of that are featured on this article, we are able to safely say that the neighborhood is greater than enthusiastic about this API. In case you’ve constructed one thing superior utilizing Shared Component Transitions API, be at liberty to succeed in out on Twitter or LinkedIn and share your work.

Many because of Nikola Vranesic for reviewing the article for technical accuracy.

References

Shared Component Transitions, WICG
“Clean and easy web page transitions with the shared factor transition API,” Jake Archibald
CSS Shared Component Transitions Module Degree 1, W3C