JohnPaulDesign
5/2/2017 - 2:55 PM

Animate genesis mobile header dropdown with GSAP

Animate genesis mobile header dropdown with GSAP

// Mobile Navigation animations
    var mobileNav = new TimelineMax({paused: true, onStart: function () {mobileNav.timeScale(1)}});
    mobileNav.staggerFromTo(".nav-header li", 0.8, {autoAlpha: 0, x: -20}, {autoAlpha: 1, x: 0, ease: Power3.easeOut}, 0.08, 0);

    jQuery(".menu-toggle").click(function () {
        if (jQuery(".menu-toggle").hasClass("activated")) {
            mobileNav.play();
        } else {
            mobileNav.timeScale(5).reverse();
        }
    });
    
    jQuery(window).resize(function () {
        if(jQuery(window).width() >= 1100) {
            TweenMax.set(".nav-header li", {autoAlpha: 1, x: 0});
        } 
    }).resize();