Web Development: How to Create Smooth Page Transitions with JavaScript

Monday, December 28, 2020

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