011023-navbar-anim/script.js at main · animecodeindo/011023-navbar-anim · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
window.onload = () => {
    const menu = document.querySelector('.menu');
    var titleMenu = new SplitType('h1', { types: 'words, chars' });
    var menuText = new SplitType('.menuText', { types: 'words, chars' });
    let tl = gsap.timeline();

    tl.from(".menu-dropdown", {
        duration: 1,
        "clip-path": "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        ease: "expo.inOut",
    }, 0.1)

    tl.from(titleMenu.chars, {
        duration: 1,
        y: "100%",
        stagger: 0.09,
        ease: "expo.out"
    }, 0.5)

    tl.from("h1 span", {
        duration: 1.5,
        width: "0%",
        ease: "expo.inOut"
    }, 0.5)

    tl.from(menuText.chars, {
        duration: 1,
        y: "100%",
        stagger: 0.08,
        ease: "expo.out"
    }, 0.6)

    tl.from("li span", {
        duration: 1.5,
        width: "0%",
        ease: "expo.inOut",
        stagger: 0.09,
    }, 0.8)

    tl.reverse();

    menu.addEventListener('click', () => {
        menu.classList.toggle('active');
        tl.reversed(!tl.reversed());
    })

}