<portal> will allow us to break down single page applications into multiple projects while still offering an amazing page transition experiences. But we need to start from the beginning on why existing SPA have such poor page transition experience in the first place.
While poor loading experiences are suffered greatly by users with low powered device and bad networks; improving the loading experience impacts everybody. Networks are unreliable and have varied performance. Imagine only having half a webpage loaded while enter a train tunnel. Aghast! That would leave us stranded with nothing to do but talk to a fellow human.
In the perfect world with a single page application (SPA), users only experience HTML page loading once per session. But as that SPA gets too big and more teams need to work on it at the same time, there becomes a need to split up the SPA into multiple projects, I.E. a multi page application (MPA).
While more loading experiences need to be designed for multi page applications, it also presents an opportunity to create a page transition experience. With MPAs designers are in control of both the start and end page. Page transitions can become meaningful experiences.
A new HTML element
<portal> is being proposed to make it easier to implement page transitions.
<portal> are almost identical to
<iframe>, except one additional trick up its sleeve.
<portal> can be activated to replace the current window but without a reload. This trick allows one to replace a loading experience with a perfect jank-free page transition!
On the other hand, while
<iframe> can be preloaded before rendering to avoid the loading experience and even animated along with the current page; when we actually load the next webpage with
window.location = someIframe.src, our users end up suffering another load experience.
Note the demo requires Chrome as that is the only browser that has implemented
<portal>. Full instructions are in the demo.
While we wait for
<portal> to become standardized and implemented across all browsers, what is the best page transition experience we can offer right now?
We can effectively hide the page load if have a shared interstitial from the current page to the next.
A simple example is fading the current page to black, performing the page load into a black page, and then fade in the new content. Advanced versions would be an on brand full screen loading animation. The animation doesn't need to be long and obnoxious, there just needs to be a sensible moment for the interstitial.
Are you excited to build loading experiences and page transitions? We'd like to hear from you, Battlefy is hiring.