Add page transitions to your site with css and smoothState.js

This post was originally created by Miguel Ángel Pérez. He is working on ways to transitions on web pages.

jquery.smoothState.js

Now on the web; page animations are playing a big role for the user experience. As when user jumps on the native applications; transitions are fruitful. We can’t deny that user experience. Users are grown and expecting the smooth behavior throughout. And we should not make them feel outdated.

Below is the example of smoothState.js to achieve the transitions:

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.

About mufeed

India based user experience developer. He is specialized in web and mobile user interface design and development.
This entry was posted in Corporate World!, HTML / CSS, Java script / jQuery, Mobile Tech, Whats Up. Bookmark the permalink.

4 Responses to Add page transitions to your site with css and smoothState.js

  1. Parmod Kumar says:

    Thanks for sharing… gr8 stuff

  2. vandana says:

    the demo isnt working pls fix!!!

Leave a Reply to vandana Cancel reply