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.


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:


<!doctype html>
    <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">
    <!-- Animation class -->
    <div id="main" class="m-scene">
      <!-- Classes that define elment animations -->
      <div class="scene_element scene_element--fadein">
        <!-- contents... -->
    <!-- Scripts -->
    <script src="jquery.js"></script>
    <script src="jquery.smoothState.js"></script>
    <script src="functions.js"></script>


 * 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;
} .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
            // Scroll user to the top
              scrollTop: 0
      //.data('smoothState') makes public methods available

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 Parmod Kumar Cancel reply