usecueweb development

Page Transition by Usecue

Close
  • readme.txt
  • index.html
  • index2.html
  • transition.css
  • transition.js

What is this?

A page transition for ordinary multi-page websites. When you click a link, the old page drifts up while a splash screen wipes in from the bottom, holds for a moment, then wipes out again while the new page slides into place. There is no client-side router: every click is still a normal page load. The browser’s cross-document view transitions do the heavy lifting.

How to use it?

Add a hidden splash element to every page and load the stylesheet and script in the head. The script must run before the first render of the page, so keep it in the head and don’t defer it.

<link rel="stylesheet" href="transition.css" />
<script src="transition.js"></script>
...
<div id="splash">Your splash screen</div>

Both pages of a navigation need the stylesheet: the outgoing page opts in to the transition, the incoming one animates it.

How does it work?

The stylesheet opts in with @view-transition {navigation: auto}. On navigation the browser snapshots the old page, loads the new one without showing it, and lets CSS animate the snapshots. transition.js listens for pagereveal and adds html.vt-active, which shows #splash just long enough to be captured as its own snapshot; a clip-path animation on that snapshot does the wipe, so the splash itself never moves. The wipe edge is a shape() that starts as a flat line and bows into an arc; browsers without shape() get a straight edge.

Features

Static splash, curved wipe, old page drifting out and new page sliding in, all timing in a handful of CSS variables. Works in Chrome and Safari; other browsers simply navigate. Respects prefers-reduced-motion.

License

This code is licensed WTFPL.

 1<link rel="stylesheet" href="/demos/pagetransition/transition.css" />
 2<script src="/demos/pagetransition/transition.js"></script>
 3
 4<style>
 5    body {background: white; display: grid; place-items: center; text-align: center;}
 6</style>
 7
 8<div>
 9    <h1>Page one</h1>
10    <p><a href="/demos/pagetransition/index2.html">Go to page two</a></p>
11</div>
12
13<div id="splash">Splash screen</div>
 1<link rel="stylesheet" href="/demos/pagetransition/transition.css" />
 2<script src="/demos/pagetransition/transition.js"></script>
 3
 4<style>
 5    body {background: white; display: grid; place-items: center; text-align: center;}
 6</style>
 7
 8<div>
 9    <h1>Page two</h1>
10    <p><a href="/demos/pagetransition/">Back to page one</a></p>
11</div>
12
13<div id="splash">Splash screen</div>
 1/* opt in to cross-document view transitions (needed on both pages) */
 2@view-transition {navigation: auto;}
 3
 4:root {
 5    --vt-cover: 750ms;      /* splash wipes in */
 6    --vt-hold: 450ms;       /* splash stays */
 7    --vt-uncover: 750ms;    /* splash wipes out, new page slides in */
 8    --vt-ease: cubic-bezier(0.625, 0.05, 0, 1);
 9    --vt-bow: 30vmax;       /* how much the wipe edge bows */
10}
11
12/* splash: hidden, shown by transition.js while the transition runs so the
13   browser captures it as its own snapshot ("splash") */
14#splash {
15    display: none;
16    position: fixed;
17    inset: 0;
18    z-index: 100;
19    align-items: center;
20    justify-content: center;
21    background: #171f27;
22    color: white;
23    pointer-events: none;
24}
25html.vt-active #splash {display: flex; view-transition-name: splash;}
26
27/* the two page snapshots are opaque and overlap: no additive blending */
28::view-transition-old(root),
29::view-transition-new(root) {mix-blend-mode: normal;}
30
31/* old page drifts up while the splash covers it */
32::view-transition-old(root) {animation: vt-page-out var(--vt-cover) var(--vt-ease) forwards;}
33
34/* new page stays hidden until the splash leaves, then slides into place */
35::view-transition-new(root) {
36    animation:
37        vt-invisible calc(var(--vt-cover) + var(--vt-hold)) linear,
38        vt-page-in var(--vt-uncover) var(--vt-ease) calc(var(--vt-cover) + var(--vt-hold)) both;
39}
40
41/* the splash never moves; an animated clip mask reveals and hides it */
42::view-transition-group(splash) {animation: none;}
43::view-transition-new(splash) {
44    animation:
45        vt-mask-cover var(--vt-cover) var(--vt-ease) both,
46        vt-mask-uncover var(--vt-uncover) var(--vt-ease) calc(var(--vt-cover) + var(--vt-hold)) forwards;
47}
48
49/* flat wipe edge (fallback) */
50@keyframes vt-mask-cover {
51    from {clip-path: inset(100% 0 0 0);}
52    to   {clip-path: inset(0);}
53}
54@keyframes vt-mask-uncover {
55    from {clip-path: inset(0);}
56    to   {clip-path: inset(0 0 100% 0);}
57}
58
59/* curved wipe edge: the control point of the curve starts on the edge (flat
60   line) and moves away from it while the edge travels (arc) */
61@supports (clip-path: shape(from 0 0, close)) {
62    ::view-transition-new(splash) {animation-name: vt-mask-cover-curved, vt-mask-uncover-curved;}
63}
64@keyframes vt-mask-cover-curved {
65    from {clip-path: shape(from 0% 100%, curve to 100% 100% with 50% calc(100% - 0vw), vline to 100%, hline to 0%, close);}
66    to   {clip-path: shape(from 0% 0%,   curve to 100% 0%   with 50% calc(0% - var(--vt-bow)), vline to 100%, hline to 0%, close);}
67}
68@keyframes vt-mask-uncover-curved {
69    from {clip-path: shape(from 0% 0%, hline to 100%, vline to 100%, curve to 0% 100% with 50% calc(100% + var(--vt-bow)), close);}
70    to   {clip-path: shape(from 0% 0%, hline to 100%, vline to 0%,   curve to 0% 0%   with 50% calc(0% + 0vw), close);}
71}
72
73@keyframes vt-page-out {
74    from {transform: translateY(0);}
75    to   {transform: translateY(-15vh);}
76}
77@keyframes vt-page-in {
78    from {transform: translateY(25vh);}
79    to   {transform: translateY(0);}
80}
81@keyframes vt-invisible {
82    from, to {opacity: 0;}
83}
84
85@media (prefers-reduced-motion: reduce) {
86    @view-transition {navigation: auto;}
87}
1/* show #splash for as long as the view transition runs, so the browser
2   captures it as the "splash" snapshot that transition.css animates */
3window.addEventListener('pagereveal', function (e) {
4    if (!e.viewTransition) return;
5    document.documentElement.classList.add('vt-active');
6    e.viewTransition.finished.finally(function () {
7        document.documentElement.classList.remove('vt-active');
8    });
9});