Porsche-website/hsm.js at main · divyanshu-patil/Porsche-website · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import gsap from "gsap"

let hamberger = document.querySelector(".hamburger")
let navigation = document.querySelector(".navigation")
let menu = document.querySelector(".menu")
let close = document.querySelector(".close")
let right_bottom = document.querySelector(".right-bottom")
const anchors = document.querySelectorAll('.a-wrapper');
let dot = document.querySelector(".cursor")
let hover = document.querySelectorAll(".LargeHover")

const context = gsap.context(()=>{


hover.forEach((e)=>{
    e.addEventListener('mouseenter',()=>{
        dot.classList.add("mixer")
        gsap.to(dot,{
            scale:3
        })
    })

    e.addEventListener('mouseleave',()=>{
        dot.classList.remove("mixer")
        gsap.to(dot,{
            scale:1
        })
    })
})


// Add event listener to each anchor tag
anchors.forEach(anchor => {
    anchor.addEventListener('mouseenter', (event) => {
        event.preventDefault();
        right_bottom.innerHTML = anchor.id
       let entire = `.red-line${anchor.id}`
       gsap.to(dot,{
        scale:3
    })
        gsap.to(entire, {
            width: `10vw`,
            duration: 1,

        });
    });
    anchor.addEventListener('mouseleave', (event) => {
        event.preventDefault();
        let entire = `.red-line${anchor.id}`
        gsap.to(dot,{
            scale:1
        })
        gsap.to(entire, {
            width: 0,
            duration: 1,
            onComplete:()=>{
                 right_bottom.innerHTML = "00"
            }
        });


    });

})


})


hamberger.addEventListener('click',()=>{

        navigation.style.display = 'flex'
        document.body.style.overflow = 'hidden';

       gsap.to(navigation,{
         x:`-100%`,
        duration :1.5,
        onComplete:()=>{
            menu.style.display = 'none'
            close.style.display = 'block'

      }
    })
})

close.addEventListener('click',()=>{

    gsap.to(navigation,{
        x:`100%`,
        duration :1.5,
        onComplete:()=>{

              navigation.style.display = 'none'
              menu.style.display = 'block'
              close.style.display = 'none'
        }
     })
})