Categories

Page Transitions in WordPress with SmoothState

May 7, 2016

SmoothState.js is a javascript library that adds transitions between pages on your site using AJAX. I use it on this site to help create a more seamless experience when going through pages. Aside from transitions, it can also be used to increase the speed of your site slightly.

Requirements

jQuery is required for SmoothState. If you already have a theme, its more than likely the theme already has jQuery registered. If you’re building your own, and you haven’t added it yet, add this to your functions.php:

wp_enqueue_script('jquery');

Once you’ve added jQuery, ensure any links to your internal pages are full URL’s, and not just an ID or HTML fragment. If you have a nav that scrolls you down the page, I’ll show you how to excludes those from the SmoothState so that they continue to work.

By default, SmoothState won’t add transitions, so it will jump. I’ve included Animate.css in my theme and use.

Getting Started

Download jquery.smoothstate.js and place it in your theme with other JS files. You can add it to an existing js file or register and enqueue it separately:

Next we’ll need to create a container basically wraps around everything that will be injected. I open this div right after the <body> and close it right before </body>. I do call the footer in this container. In this instance, I gave the container an ID of SmoothBody. I also added a class of m-scene, which we will add CSS3 animation properties too.

At this point, the content should reloaded through AJAX in the container instantly. If its not working, inspect the console for errors and check to make sure you have jQuery, SmoothState.js, then the function we declared, in that order. If you’re still stumped, you can always comment below for help or tweet at the author Miguel Pérez.

Here’s the SmoothState function that I have implemented on my site. I’ve commented it as well to explain it.

Adding Animations

Lastly, to add the animations in, i’ll be utilizing CSS3 animations, particularly animate.css. If you haven’t already, add that into your sites CSS. Earlier, we added the m-scene class to the container div, because using the ID in css is slower than a class. Here’s the CSS used to add in animations:

In the example above, each element that animates should have the scene-element class, which controls the duration, fill mode, timing mode (ease-in). A second class, in this case scene-element–fadeIn, tells us which animation to run. With that in place it, your site should now be transitioning between pages. Let me know if you ran into trouble or need help!