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