menu karlo

Navigation.ts

import {Power4, TimelineMax, TweenMax} from "gsap";
import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';

export class Navigation {
    private readonly button: null | HTMLElement;
    private readonly menuCircle: null | HTMLElement;
    private readonly menuWrapper: HTMLElement;
    private readonly hamburger: null | HTMLElement;
    private readonly menuLogo: HTMLElement;
    private readonly singleMenuItem: NodeListOf<HTMLElement>;
    private readonly tl: TimelineMax;

    constructor() {
        this.button = document.querySelector(".js-navigation-button");
        this.menuWrapper = <HTMLElement>document.querySelector(".js-navigation");
        this.menuCircle = document.querySelector(".js-menu-circle");
        this.hamburger = document.querySelector(".hamburger");
        this.menuLogo = <HTMLElement>document.querySelector(".js-menu-logo");
        this.singleMenuItem = document.querySelectorAll(".js-menu-item");
        this.tl = new TimelineMax({
            paused: true
        });

        if (!this.button) {
            return;
        }

        this.button.addEventListener("click", this.toggle(() => {
            this.openCircleNav();
        }, () => {
            this.closeCircleNav();
        }));

        this.initTimeline();

    }

    private initTimeline() {

        if (!this.menuCircle) {
            return;
        }

        this.tl.to(this.menuCircle, 0.888,
            {
                scale: 100,
                ease: Power4.easeIn,
            })
            .add('start', '-=0.2')
            .staggerFromTo(this.singleMenuItem, 0.444,
                {
                    autoAlpha: 0,
                    x: -20,
                },
                {
                    autoAlpha: 1,
                    x: 0,
                }, 0.1, 'start')
            .to(this.menuLogo, 0.444,
                {
                    autoAlpha: 1,
                    ease: Power4.easeIn,
                }, 'start');

    }

    private openCircleNav() {

        if (!this.menuCircle || !this.hamburger || !this.menuWrapper) {
            return;
        }

        TweenMax.set(this.menuWrapper, {
            autoAlpha: 1,
        });

        this.hamburger.classList.add('is-active');

        this.tl.timeScale(1).play();

        disableBodyScroll(this.menuWrapper);

    }

    private closeCircleNav() {

        if (!this.menuCircle || !this.hamburger || !this.menuWrapper) {
            return;
        }

        TweenMax.set(this.menuWrapper, {
            autoAlpha: 0,
            delay: this.tl.duration(),
        });

        this.hamburger.classList.remove('is-active');

        this.tl.timeScale(2).reverse();

        enableBodyScroll(this.menuWrapper);

    }

    private toggle(a: () => void, b: () => void) {
        let toggle = false;
        return function () {
            return (toggle = !toggle) ? a() : b();
        };
    }

}