smoothState.js – jQuery Plugin for Neat Page Transitions

Download   Demo

Usage

smoothState.js was built to allow you to achieve really neat page transitions on your site, such as what you might see on Codrops or AprilZero. In order to achieve this on a production site, we need to handle less obvious issues as not to break a user’s browsing expectations. By default, smoothState will handle few problems for you:

• Updating your user’s URL with popState


• Fetching content from your server via AJAX


• Replacing the content on your page with the new content

The basics

To achieve this barebones functionality, you can run:

$('#body').smoothState();

This line of code will cause our page to update with the contents of any links inside of the #body container without reloading the page.

Adding page transitions

In traditional animation, the changes to a scene need to be drawn out in an array of frames that get swapped out in rapid succession. Likewise, smoothState allows you to define an array of functions that return the markup that gets swapped out on the page. This is useful because it allows you to add the needed HTML scaffolding to achieve CSS animations. Here’s a basic example of a simple fade effect:

Javascript:

$('#body').smoothState(
 renderFrame: [
 // Frame 1: sets up scaffolding needed for CSS animations
 function ($content, $container) 
 var currentHTML = $container.html(),
 newHTML = $('<div/>').append($content).html(),
 html = [
 '<div class=\'content\' style=\'height:' + $container.height() + 'px;\'>',
 '<div class=\'page page--old\'>' + currentHTML + '</div>',
 '<div class=\'page page--new\'>' + newHTML + '</div>',
 '</div>'
 ].join('');
 return html;
 ,
 // Frame 2: cleans up extra markup added for CSS animations
 function ($content) 
 return $('<div/>').append($content).html();
 
 ]
);

CSS:

/* Page transitions - simple fade effect
------------------------------------------------- */
#body .content 
 position: relative;
 z-index: 1;


#body .page 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;


#body .page--old 
 animation: fadeOut 0.1s ease; /* Don't forget to add vendor prefixes! */
 opacity: 0;
 z-index: 1;


#body .page--new 
 visibility: visible;
 animation: fadeIn 0.4s ease;
 z-index: 2;



/* Animations classes
------------------------------------------------- */

@keyframes fadeIn 
 from 
 opacity: 0;
 
 to 
 opacity: 1;
 


@keyframes fadeOut 
 from 
 opacity: 1;
 
 to 
 opacity: 2;
 

smoothState.js – jQuery Plugin for Neat Page Transitions