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.
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:
- Basic + Custom animations that auto reverse between page transitions using Animate.CSS:
- Basic + Custom animations + on-scroll animations using ScrollReveal.js:
Let's load smoothState so that page transitions happen smoothly without a visible page refresh.
Upload jquery.smoothState.min.js to child theme's
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.