---
title: "How to Add Page Loading Transition Effects in WordPress?"
url: https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/
date: 2023-04-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The moment the loading screen disappears is jarring if the page simply snaps into place. Page transitions smooth that hand-over, and can animate the page on the way out too...."
image: https://nexterwp.com/wp-content/uploads/2024/05/page-loading-transition-effects-in-wordpress-1024x519.jpg
word_count: 426
---

# How to Add Page Loading Transition Effects in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block adds page transition effects after the page loading animation, and it requires the block to be installed and activated.
- Page Transition tab lets users choose effects from the Transition dropdown, set a Direction for some effects, and enable Out Transition for navigation to another page.
- Exclude Class lets users enter one or more class names separated by commas so clicks on elements like buttons or form buttons do not play the out transition.

The moment the loading screen disappears is jarring if the page simply snaps into place.

Page transitions smooth that hand-over, and can animate the page on the way out too.

*For every Pre Loader setting in one place, see the [Pre Loader block guide](https://nexterwp.com/docs/add-preloader-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

## Before You Start

- **Edition:** **Pro** — the Pre Loader block is part of Nexter Blocks Pro.- **Block to enable:** Pre Loader, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A Pre Loader block already on the page:** the transitions belong to it.

## Steps

- Select the **Pre Loader** block and open the **Page Transition** panel.

![The Page Transition panel with the Transition dropdown](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-transition.webp)

- Choose a **Transition**: Fade, Slide, Triple Swoosh, Simple or Duo Move.

- Switch **Out Transition** on if you also want an exit animation when visitors leave the page.

![The Out Transition toggle in the Page Transition panel](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-out-transition.webp)

- Publish the page and open it in a new tab to see the effect.

## The Five Transitions

| Transition | What it does |
| ---------- | ------------ |
| Fade | The page fades in as the loader clears. This is the default. |
| Slide | The page slides in from the direction you choose. |
| Triple Swoosh | Three panels sweep across before the page appears. |
| Simple | A plain reveal with no extra movement. |
| Duo Move | Two panels move apart to reveal the page. |

## How It Behaves

- The transition is applied to the loading overlay, so it plays as the overlay hands over to the page.- **Fade** is the default and adds nothing extra to the markup. The other options each add their own animation classes.- **Slide**, **Triple Swoosh** and **Duo Move** take a direction, so the movement can match the rest of your design.- **Out Transition** is a separate switch: with it off the page just navigates away as usual, and with it on the exit is animated too.

## Limitations

- **Pro only.**- The transitions belong to the Pre Loader block, so a page with no Pre Loader has none of them.- An out transition delays the visitor slightly on every click, which is noticeable on a site people click through quickly.- The heavier reveals add a moment before the page appears — the opposite of what a preloader is for if you overdo it.

## Troubleshooting

### I see no difference

You are probably on **Fade**, which is the default and the subtlest. Try **Triple Swoosh** to confirm the setting is taking effect, then choose what suits.

### The transition only plays sometimes

A cached page can load fast enough that the transition is over before you see it. Test in a private window.

### Leaving the page feels slow

Switch **Out Transition** off. The exit animation has to finish before the next page starts loading.

## Related Docs

- [Exclude content from the preloader](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/)- [Combine several preloader animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/)