orhalevi/script.js at main · samarthj0612/orhalevi · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
gsap.to(".lshift", {
  scrollTrigger: {
    trigger: "#main2",
    start: "top 100%",
    end: "top 20%",
    scrub: 2,
  },
  x: -80,
});
gsap.to(".rshift", {
  scrollTrigger: {
    trigger: "#main2",
    start: "top 100%",
    end: "top 30%",
    scrub: 2,
  },
  x: 80,
});
gsap.to("#main1 #content h3", {
  scrollTrigger: {
    trigger: "#main2",
    start: "top 70%",
    end: "top 40%",
    scrub: 2,
  },
  y: 20,
  opacity: 0,
});

// document.querySelectorAll(".enlarge").forEach(function(elem){
//   elem.addEventListener("mousemove", function(){

//   })
//   elem.addEventListener("mouseleave", function(){

//   })
// })

gsap.from("#main2 #img1", {
  scrollTrigger: {
    trigger: "#main2",
    start: "top 70%",
    end: "100% 60%",
    scrub: 2,
    // markers : true
  },
  top : "70%",
 left : "-30%",
  rotation : 0,
  // opacity : 1,
  width : "40vw"
});

gsap.from("#main2 #img2", {
  scrollTrigger: {
    trigger: "#main2",
    start: "top 40%",
    end: "90% 70%",
    scrub: 2,
    // markers : true
  },
  top : "100%",
  right : "-30%",
  rotation : 0,
  // opacity : 1,
  width : "40vw"
});


gsap.to("#cursor img", {

  rotation : 360,
  duration : 5,
  repeat : -1,
  ease : "linear"

})

window.addEventListener("mousemove", function(dets){
  function abc(){
    document.querySelector("#cursor").style.top = `${dets.clientY}px`;
    document.querySelector("#cursor").style.left = `${dets.clientX}px`;
  }
  window.requestAnimationFrame(abc);
})

document.querySelectorAll(".img #content").forEach(function(image){
    image.addEventListener("mouseover", function(){
        this.style.filter = "grayscale(0%)";
        document.querySelector("#cursor").style.display = "initial";
      })
      image.addEventListener("mouseleave", function(){
        this.style.filter = "grayscale(100%)";
        document.querySelector("#cursor").style.display = "none";
    })

})

gsap.set("#getmehere", {
    top : -20
  });
gsap.from("#getmehere", {
    scrollTrigger: {
      trigger: "#sj-footer",
      start: "top 80%",
      end: "top 50%",
      scrub: 4
    },
    y: 200
  });


document.querySelector("#sj-footer #getmehere").addEventListener("mouseover", function(){
    gsap.to("#sj-footer #getmehere svg:nth-child(2)", {
        rotation : 320
    })
})
document.querySelector("#sj-footer #getmehere").addEventListener("mouseleave", function(){
    gsap.to("#sj-footer #getmehere svg:nth-child(2)", {
        rotation : 0
    })
})