7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. JavaScript

How to Create Smooth Page Transitions with JavaScript

Scroll to top
Read Time: 2 mins

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


Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.