Animate the header with TweenMax

CLICK HERE TO SEE THE LIVE DEMO

Here is a simple effect I have made on my website. There are many ways and many libraries we can use to animate our website.
I use Tweenmax because it's the one I am the most familiar with. But I guess we can do the same kind of effect with similar others libs.

Step 1

Create your header. Enable the Sticky option, put 0 as the Scroll Distance :

Step 2

Hide the header in CSS. To animate it, we have to change his position and change the opacity, so it will move and fade in at the same time.

@media (min-width: 1120px) {
	#_header-2-76 { 
		opacity:0;
		transform:translateY(-65px);
	}
}

Replace of course #_header-2-76 by your header ID.
As my header's height is 65px, I translate it to -65px.
And because we choose the header to be Sticky above 1120px, we just hide it when the minimum width is 1120px.

Step 3

Load the library.
Go to this website and download the package : https://greensock.com/tweenmax
Use this plugin to load the library : https://github.com/srikat/my-custom-functionality

And add this line in the function custom_enqueue_files() (plugin.php) :

wp_enqueue_script( 'gsap-js', plugin_dir_url( __FILE__ ) . 'assets/js/TweenMax.min.js', '', '', true );

Step 4

Add some javascript in your own javascript file. Don't add this kind of javascript in a Code Block or it won't work.
More info about how to create and add your own javascript here : https://oxygen4fun.supadezign.com/tutorials/how-to-add-a-tilt-effect-to-your-images/

 

const mq = window.matchMedia("(min-width: 1120px)");
if (mq.matches) {
    var iScrollPos = 0;
    $(window).scroll(function() {
        var iCurScrollPos = $(this).scrollTop();
        if (iCurScrollPos > iScrollPos) {
            TweenMax.to("#_header-2-76", 1, { y: 0, opacity: 1, ease: Bounce.easeOut });
        } else {
            TweenMax.to("#_header-2-76", 0.5, { y: -65, opacity: 0, ease: Power4.easeOut });
        }
        iScrollPos = iCurScrollPos;
    });
}

Like for the CSS, this effect will only work when the width is 1120px or above. And again, replace #_header-2-76 by your header ID.

There are 2 TweenMax calls. The first one is called when we scroll down :

TweenMax.to("#_header-2-76", 1, { y: 0, opacity: 1, ease: Bounce.easeOut });

The second one when we scroll up :

TweenMax.to("#_header-2-76", 0.5, { y: -65, opacity: 0, ease: Power4.easeOut });

The first number is the duration (1 for 1 second), then we have the targets : The Y position. the opacity and the easing.

For more information about Tweenmax, check this page : https://greensock.com/get-started-js