All animations / Page transitions

Page transitions

Moving between pages or views: curtains, wipes, crossfades and intros. 5 animations.

A coloured panel sweeps up to cover the screen, the view underneath swaps, then the panel sweeps away.

The browser snapshots the old and new view and crossfades them for you with document.startViewTransition().

The current view slides out one side while the next slides in, like a native app navigation.

The next view expands as a circle from exactly where you clicked, using an animated clip-path.

A full-screen loader counts to 100, then splits open to reveal the page. Shown once per session.