> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Transitions

> An entrance and exit animation between pages, and a preloader while the next one loads.

**Bevel → Site Settings → Page Transitions** replaces the teaser the free editor shows there with the real controls. Control ids, CSS variables and the transition element follow Elementor Pro's, so a site configured with Pro keeps its transitions.

## Page transition

* **Background**: the colour of the page behind the animation (default a near-black).
* **Entrance animation**: fade in, fade in from a direction, zoom in, slide in from a direction, per device.
* **Exit animation**: the matching set, shown once an entrance is chosen.
* **Animation duration**, default 1.5 s.
* **Preview** replays it in the editor.

## Preloader

* **Type**: none, an animation, an icon, or an image.
* **Animation**: thirteen built-in loaders (circle, dashed circle, bouncing dots, pulsing dots, pulse, overlap, spinners, nested spinners, opposing rings, progress bars, a repeating bar).
* **Icon** or **image**, with an optional motion (spinning, bounce, flash, pulse, rubber band, shake, swing, tada, wobble, jello) and a duration.
* **Preloader delay**: how long the loader stays before the next page shows.
* **Style**: colour, size, rotation for icons; width, maximum width and opacity for images.

## Where it plays

On pages, posts, archives, the blog home and the front page, not on paged URLs, and only when an entrance animation or a preloader is set. The script loads in the head so the overlay never flashes. Links into wp-admin are never intercepted.