Sridhar Katakam

Genesis and WordPress Tutorials

Unobtrusive page transitions in Genesis with smoothState.js

by Leave a Comment

smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions.

In this tutorial I discuss implementing smoothState.js in Genesis.

Since the HTML content of initial page (ex.: front page) will be replaced with that of the later page (ex: an inner page) using Ajax, going back to the initial page will make scripts (if any) on the initial page to not load because the elements will not be present in the DOM.

If you have control on initialization of such scripts, it is possible to make them work and I cover that in this tutorial (in Scenario 3, below). However, if the scripts come from plugins, they will break. The plugin author has shared a way around it, but I have been unable to get it working during my testing. If you have advanced Javascript skills, you should be able to figure it out.

As always, this tutorial has been tested in current latest version of Genesis Sample and should work in any other Genesis child theme with minor adjustments.

Demos of what's covered in this tutorial:

  • Basic Scenario:



https://www.youtube.com/watch?v=LELmewGoTgc


  • Basic + Custom animations that auto reverse between page transitions using Animate.CSS:



Basic Scenario

Let's load smoothState so that page transitions happen smoothly without a visible page refresh.

Step 1

Upload jquery.smoothState.min.js to child theme's js directory.

Create a file named say, smoothstate-init.js in the same location having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

>