# Page transitions

> Animate the change from one page to the next with a fade, slide, flip or scale. (Pro)

Source: https://arraystory.com/docs/ajaxpress/page-transitions/

A page transition animates the moment one page gives way to the next. Instead of the new page simply appearing, the old one fades, slides, flips or shrinks away as the new one arrives. It needs [AjaxPress Pro](https://arraystory.com/docs/ajaxpress/ajaxpress-pro/).

## Turn it on

1. Go to **Settings → AjaxPress → Animations**.
2. In the **Content Animation** card, turn on **Enable Animation**.
3. Choose a **Style** and a **Duration**. Click **Preview** to watch it in the preview panel.
4. **Save Settings**.

![Animate content between pages with a fade, slide, scale or flip.](https://r2.arraystory.com/docs/ajaxpress/page-transitions.mp4?v=289afaa30b)

## Styles

| Style | What happens | Feels |
| --- | --- | --- |
| **Fade** | The old page fades out as the new one fades in | Smooth and quiet. A good default |
| **Slide** | The old page lifts up and away; the new one rises into place from just below | Lively, like moving forward |
| **Flip** | The pages tip over on a 3D hinge | Playful. Best on simple, image-light sites |
| **Scale** | The old page shrinks back slightly; the new one settles into place from slightly larger | Subtle depth, app-like |

## Duration

**Fast** (0.2 seconds), **Normal** (0.3 seconds, the default) or **Slow** (0.5 seconds). The time is split between the old page leaving and the new one arriving.

> [!TIP]
> Keep it short. The new page is already loaded while it animates, so a long transition only adds waiting. Fade at Fast or Normal suits most sites. Pair it with [prefetch](https://arraystory.com/docs/ajaxpress/prefetch/) for page changes that feel instant.

## When it plays

- On every page change: links, forms, and Back and Forward.
- Not on the first page a visitor loads, which appears as usual.
- [Persistent players](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/) stay still. Only the page underneath animates.

## Scroll to top

With [Scroll to Top Smoothly](https://arraystory.com/docs/ajaxpress/scroll-to-top/) on, the new page glides to the top after the transition. If the two movements together feel busy, turn one of them off.

## For developers

Build your own transition, from a theme or plugin, with `registerTransition()`. See the [JavaScript extension API](https://arraystory.com/docs/ajaxpress/javascript-extension-api/#custom-transition).