Add page transitions to your site - jQuery.smoothState.js

← jquery.smoothState.js

This page showcases a demo of what a typical implementation of smoothState.js might look like. It decorates page loads with a simple fade effect by using CSS animations.

What makes this a 'typical' example?

Animations take a lot of time to perfect. Each layout demands a careful choreography of how elements on the page appear and disappear. A simple fade effect, however, is the perfect way to add a slick finish to any site with little effort.

Adding page transitions

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 add these types of transitions, we'll have to override the default callbacks that handle how the content gets injected into the page.

For the purpose of this example, we'll only override "onStart".

The HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home - My Site</title>
    <link href="keyframes.css">
    <link href="pageTransitions.css">
  </head>
  <body>
    <!-- Animation class -->
    <div id="main" class="m-scene">
      <!-- Classes that define elment animations -->
      <div class="scene_element scene_element--fadein">
        <!-- contents... -->
      </div>
    </div>
    <!-- Scripts -->
    <script src="jquery.js"></script>
    <script src="jquery.smoothState.js"></script>
    <script src="functions.js"></script>
  </body>
</html>

The CSS

/*
 * CSS Animations
 * Don't forget to add vendor prefixes!
 */
.m-scene .scene_element {
  animation-duration: 0.25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
  animation-name: fadeIn;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
}

/*
 * Keyframes
 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

The JS

// Contents of functions.js
;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: {
          duration: 250, // Duration of our animation
          render: function (url, $container) {
            // toggleAnimationClass() is a public method
            // for restarting css animations with a class
            content.toggleAnimationClass('is-exiting');
            // Scroll user to the top
            $body.animate({
              scrollTop: 0
            });
          }
        }
      }).data('smoothState');
      //.data('smoothState') makes public methods available
})(jQuery);

Play with the demo.

Other animation effects

smoothState.js allows for more complex animations, such as what you see on this site. To achieve this, you'll need to define @keyframes that describe the animations we want. Daniel Eden has written up a small library of predefined css animations we can use called animate.css.