Smoothstate.js & Velocity.js

[kaspar-allenbach]

I'm trying to make a smooth fade with smoothstate and velocity.

;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: {
              render: function (url, $container) {
                $("#main").velocity("fadeOut", { duration:1000 });
              }
        }
        onEnd: {
            render: function (url, $container) {
                $("#main").velocity("reverse");
            }
        }
      }).data('smoothState');
})(jQuery);

It almost works. The small problem ist, that the page fades out and never fades back in. Why is that?

Shouldn't onStart fade the old page out and then onEnd fade the new page back in?

[Jonathlee]

Hello @Seppentoni, do you have a live testing site we can refer to?

[kaspar-allenbach]

Not yet. But I'll push it today.

[Jonathlee]

just notice a small mistake in the code u post,

u missed a " , " comma before the onEnd:

;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: {
              render: function (url, $container) {
                $("#main").velocity("fadeOut", { duration:1000 });
              }
        },
        onEnd: {
            render: function (url, $container) {
                $("#main").velocity("reverse");
            }
        }
      }).data('smoothState');
})(jQuery);

[kaspar-allenbach]

Hi @Jonathlee

Alright. I pushed the alpha onto the server: http://stage.aare.guru/ The first two links are triggered "Luft" and "Wasser". If you click one of these, the page will fade and then thats it. What is the issue there?

[Jonathlee]

plz try this code, it works on my side.

;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
          prefetch: true,  development : true,
          pageCacheSize: 4,

          // in progress of loading
            onProgress : {
                duration: 0, // Duration of the animations, if any.
                render: function (url, $container) {
                    $body.css('cursor', 'wait');
                    $body.find('a').css('cursor', 'wait');
                    }

            },
            onEnd : {
                duration:4000, // Duration of the animations, if any.
                render: function (url, $container, $content) {
                    $body.css('cursor', 'auto');
                    $body.find('a').css('cursor', 'auto');
                    $container.html($content);
                    $('#content').velocity("fadeIn", { duration: 3500 });
                    $(document).ready();
                    $(window).trigger('load');

                }
            },

            // Runs when a link has been activated
            onStart: {
              duration:4000, // Duration of our animation
              render: function (url, $container) {          
                $('#content').velocity("fadeOut", { duration: 3500 });
              }
            }
          }).data('smoothState');

      //.data('smoothState') makes public methods available
})(jQuery);

[kaspar-allenbach]

It works :) Great! What exactly does the additional code do?

[Jonathlee]

prefetch = when your mouse hover to certain link, smoothstate will fetch the content from the link to be to replace the content.

development = meant for debugging in console, please remove this line when you publish it.

pageCache = size of page cache file,

you can refer to most of the stuff in the document page.