Javascript libraries to create page transitions in your website

Page transitions are part of the user navigation and experience. The SEO, and time to load a page should never be compromised during the user journey inside a website or web app. Here are some libraries I use to create nice page transitions.

SmoothState.js

 jQuery plugin that progressively enhances page loads to give us control over page transitions.

This is the one I use on my portfolio. It allows CSS transitions, it require you to have your content in a main container and your CSS/JS files outside. When you trigger some click event, you add a class to the main container and load the new content. The URL is updated accordingly.

It’s a nice progressive enhancement. Older or non supported browsers just won’t do the transition but nothing will break.

https://github.com/miguel-perez/smoothState.js

Barba js

Create badass, fluid and smooth transition between your website’s pages.

I recently find out about this one, it’s very similar to SmoothState. You have a container div where the content will update.

barbajs.org check out the demo barbajs.org/demos.html

Animsition

A simple and easy jQuery plugin for CSS animated page transitions. 

Not as good as the first two but very easy to drop in any project. The problem is the time your page load (and your JavaScript) you might see a latency before the animation.

git.blivesta.com/animsition

Other plugin to have a look at

Different use but still interesting. Have a look at PACE, for page loading:

Automatic page load progress bar.

github.com/HubSpot/pace