How often have you visited a site only to find out that you have to wait for ages between each page load? Sounds familiar?

Our expectations of page transitions have changed over the last few years—the clunky side effects of elements rearranging on a page will not suffice; we expect more from a website. JavaScript-based Single Page Application (SPA) frameworks are often seen as the answer, but at the expense of having to use obtrusive code.

We can do much better than this. We can introduce smoothState.js, a useful plugin created by Miguel Ángel Pérez, that allows us to add transitions to make the whole experience smoother and more enjoyable for visitors. In this example, we're going to use a modified version of the demo provided by the plugin's author; some of the code has been reorganized and cleaned up from the original.

Let's take a look at the plugin in action and see how it can make for a much smoother experience. To do this, perform the following steps...