HTML Page Transitions / Animiations

While developing a hybrid mobile app with DevExtreme I was looking for other options for full page transitions. I first looked at jQuery Mobile but the routing engine in jQuery Mobile conflicted with the routing engine.
The example below uses Bootstrap for styling, Animate.css for full page transitions and smoothState.js. The demo navigates between Home and an About Page. These are two pages, not one page with two DIVs.
Run Live Demo  -  Source code for this example: download the source - (13.9KB).

jQuery Scroll To Position Demo

This scroll demo will scroll the page to a specific DIV on the page. This demo works by calling a function and that function then scrolls the page to the DIV passed. 
function scrollToSection(containerID)
   var target = $('#' + containerID);

   $('html, body').animate({
           scrollTop: target.offset().top
   }, 1000);

<button onclick="scrollToSection('section2');">Scroll to Section II</button>

Simple jQuery Plugin Working Example

I recently started developing a jQuery plugin for a project.  I found jQuery plugin development to be very interesting and can see many areas where I can use plugins going forward.

One of the best overviews of plugins I have found was over at WebDevEasy.  The author discusses plugins that work on an element and plugins that do not.  

After writing a couple of jQuery plugins that were meant to handle processing vs. elements, I decided to post this template for myself for future use. 

First the Plugin Code:  The following code has one Public and one Private function. This plugin is not meant to work on an element but meant to handle the processing required by calling a public method.  

The function starts with a semi-colon before (function ($) as a way to protect this plugin if another developer did not end their plugin with a semi colon. 
;(function ($) {
    // Create Plugin
    $.myPlugin = function (param1, param2) {

        // Public Functions
        return {
            // Public functions
            myPublicFunction: function (param1) {
    //End Plugin ----------------------

    // Private Functions 
    function myPrivateFunction(param1)
        console.log('myPrivateFunction(): ' + param1);


Plugin Use:  The following button click event calls a function which in turns calls a public method of the plugin.
<button onclick="pluginTest();">Test Plugin</button>
Get an instance of the plugin and call myPublicFunction()
function pluginTest() {
    var myTestPlugin = $.myPlugin('This is Param 1', 'This is Param 2');
    myTestPlugin.myPublicFunction('This is Param 1');

Results from the console:
myPrivateFunction(): This is Param 1