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.
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.
- 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.
- 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.
