In our previous tutorial, we used the History Web API within a static site to serve smooth page transitions. In this tutorial we’re going to take things to the next level, by applying what we learned in a WordPress website. There’ll be one crucial difference; we’ll leverage SmoothState.js instead of building our own from scratch. SmoothState.js will: Request pages asynchronously (AJAX) and replace the content accordingly. Update URLs and browsing history through the History Web API. We’ll opt for SmoothState.js for a number of reasons: Ease of use: it is an extremely easy to use jQuery plugin, requiring barely any configuration to get it up and running. APIs: SmoothState.js is packed with methods, properties, and hooks which allow us to mould it into many possible situations. Prefetching and caching: these two features allow our page transitions to be much smoother and faster than what we built in the previous tutorial. It’s unopiniated: SmoothState.js does not dictate how we apply the animation–we can lean on CSS, jQuery, Vanilla JavaScript, or an animation library like Velocity.js. Tried and tested: Considering more than a hundred issues have been
Share This