How to Create Smooth Page Transitions with JavaScript

In this JavaScript tutorial you’ll learn how to create a smooth page transition with a JavaScript library called Highway.

Before we get started it’s worth noting that this tutorial is not for beginners; we’ll be using some of the newer ES6 JavaScript syntax, and we’ll use the command line to compile ES6 to ES5, so if you’re not already a little bit comfortable with JavaScript this might not be the tutorial for you.

Creating JavaScript Smooth Transitions

What is a Smooth Page Transition?

When navigating from one web page to another a browser will use hyperlinks to determine which file to open. The process involves one page closing and another loading, and it’s usually a slightly jarring experience (albeit one we’re all very used to).

It can be done more smoothly! There are a number of techniques which allow us to load the new page, transition over to it, and update the URL in the browser at the same time. In this tutorial we use Highway.js, a JavaScript page transition library, to fade our web page out then fade the new page in.

What We Cover in This Tutorial

• Overview of the JavaScript demo
• Installing Node.js
• Using npm (Node Package Manager)
• Walkthrough of the project files, and adding package.json
• Adding the GSAP and Highway.js packages (for animations and transitions respectively)
• Introducing Parcel (which will compile our Sass files on the fly)
• Using Highway (and the data-router-wrapper and data-wrapper-view markup)
• Coding the transitions
• Refining the animations
• Add classes to the active menu items

More JS Page Transition Tutorials

• 
  WordPress
  How to Integrate SmoothState.js Into a WordPress Theme
  Thoriq Firdaus
• 
  JavaScript
  Lovely, Smooth Page Transitions With the History Web API
  Thoriq Firdaus
• 
  Animation
  Creating Animated HTML5 Page Transitions
  Craig Campbell

Resources

• Node.js
• Parcel
• Highway.js
• GSAP
• Mixkit