12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Mar 24, 2020

Fade Out/In Page Transitions in Oxygen

David Browne

In this premium tutorial we'll walk through a way we can implement some simple page transitions when users are browsing internal pages of a site built in Oxygen.

Live Demo

We'll look specifically at recreating the effect seen on the Process MasterClass site when navigating the menu on the top right (requested by a member in the WPDevDesign Facebook group).

When navigating internal pages of the site the content fades in and out either side of the page loading. The header also animates, moving up out of the viewport.

Not a Single Page App

When considering adding page transitions, there's a temptation to explore libraries such as SWUP & BarbaJS. These libraries would make our site behave as a single page app where there are no actual page loads as the user navigates the site.

These page transitions can be really smooth and feel native as no assets are having to be loaded on each page.

Without the browser doing real page loads though, workarounds are needed for it to work properly in WordPress. There are plugin conflicts, tracking scripts don't work out of the box & there can be problems loading the correct styles and JS for each page if it's not all global (like with Oxygen, for example)

Not unsolvable, but if we're just looking to add some simple transitions, working through each of the issues when applying something like BarbaJs is a little bit like creating a tornado just to blow out a match.

An Alternative Solution - Disguising the Page Load with Animations

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right