Shrinking Logo on Scroll in Genesis Sample 2.6.0

In the members-only tutorials request forum a user asked:

I would like to do a shrinking header using a large logo and that shrinks to a smaller size. If I had this in my “tool kit” plus the recent tutorials you have provided, I would be set with header options for GST 2.6.0.

This tutorial provides the steps to smoothly shrink the logo when scrolling down and animate it back to its standard size when scrolling up in Genesis Sample 2.6.0.

Step 1

a) Decide the size of your image logo and specify twice its dimensions in the custom logo add theme support function call.

In this example, we are going to display a 200 x 200 pixels image at 100 x 100. Therefore, let's set the width and height to 200px each.

i.e., in functions.php change

// Adds custom logo in Customizer > Site Identity.
add_theme_support(
    'custom-logo', array(
        'height'      => 120,
        'width'       => 700,
        'flex-height' => true,
        'flex-width'  => true,
    )
);

to

// Adds custom logo in Customizer > Site Identity.
add_theme_support(
    'custom-logo', array(
        'height'      => 200,
        'width'       => 200,
        'flex-height' => true,
        'flex-width'  => true,
    )
);

Step 2

Edit js/genesis-sample.js.

Below

// Run after the Customizer updates.
// 1.5s delay is to allow logo area reflow.
if (typeof wp.customize != "undefined") {
    wp.customize.bind( 'change', function ( setting ) {
        setTimeout(function() {
            moveContentBelowFixedHeader();
            }, 1500);
    });
}

add