Skip to main content

Page Transitions — Playground

revealing (page load) →
Transition

This transition has no extra options.

Overlay
Theme Settings values — update as you tweak
'animation_pt' => [
    'enable'     => 'yes',
    'transition' => [
        'transition' => 'fade',
    ],
    'color'      => [ 'predefined' => '', 'custom' => '#0e1524' ],
    'duration'   => 0.6,
],

Pick a transition (on the right) and tweak its options. Everything here runs the real module — the same overlay markup, the .upw-pt* classes and --pt-* variables, and the reveal / cover animations the module ships. On a real site the overlay reveals each page on load and covers it when you navigate; here it's contained in the box and loops both phases so you can watch. Hit ↻ Replay to run it again. The Theme Settings values update as you tweak.

Reveal on load, cover on navigate

The transition is a full-screen overlay: its entrance (reveal) plays automatically on page load, and its exit (cover) plays when you click a same-site link — then the next page loads and reveals. It's pure CSS animation (front-end only) and honours reduce motion. Configure it under Theme Settings → Animations → Page Transitions.

← Back to Page Transitions