What code controls the animation for the front-page header in TwentySeventeen

Looks to be global.js, in the adjustHeaderHeight() function at lines 92 – 97

// The margin should be applied to different elements on front-page or home vs interior pages.
if ( isFrontPage ) {
    $branding.css( 'margin-bottom', navigationOuterHeight );
} else {
    $customHeader.css( 'margin-bottom', navigationOuterHeight );
}

It sets the margin-bottom to the equivalent of the top navigation menu’s “outerHeight” (as defined and measured earlier) and seems to be based on the assumption that you’re probably going to have a 1 line menu that will be 70px tall, since the theme CSS is for a 70px bottom margin. The script overrules that setting.

If you have no top menu, then site-branding transitions 70px (to 0 margin-bottom) in .2 seconds (.site-branding {transition: margin-bottom 0.2s} (shortened)).

Oddly, the measure for outerHeight is on my default testing installation 72px – so there’s a 2px jitter after I add a short menu. On multi-line menus it starts to have problems with overlap.

Anyway, I’ve never looked at this before, but it doesn’t strike me as one of Twenty Seventeen’s better worked-out capacities. Maybe the designer/developers just liked the animation effect that the default installation – prior to creation of any top menus – shows.

tech