Page transitions
On this page
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.
Turn it on
- Go to Settings → AjaxPress → Animations.
- In the Content Animation card, turn on Enable Animation.
- Choose a Style and a Duration. Click Preview to watch it in the preview panel.
- Save Settings.
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.
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 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 stay still. Only the page underneath animates.
Scroll to top
With Scroll to Top Smoothly 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.