-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
78 lines (65 loc) · 1.84 KB
/
index.js
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
const Locoscroll = new LocomotiveScroll({
el: document.querySelector("#main"),
smooth: true
});
function videoconanimation() {
const videocon = document.querySelector("#video-container");
const playbtn = document.querySelector("#play");
videocon.addEventListener("mouseenter", function () {
gsap.to(playbtn, {
scale: 1,
opacity: 1
})
})
videocon.addEventListener("mouseleave", function () {
gsap.to(playbtn, {
scale: 0,
opacity: 0
})
})
videocon.addEventListener("mousemove", function (dets) {
gsap.to(playbtn, {
left: dets.x + "px",
top: dets.y + "px"
})
})
}
videoconanimation();
function loadingheading() {
gsap.from("#page1 h1 ", {
y: 100,
delay: 0.4,
duration: 0.9,
stagger: 0.6,
opacity: 0
})
}
loadingheading();
function cursorAnimation() {
document.addEventListener("mousemove", function (dets) {
gsap.to("#cursor", {
left: dets.x,
top: dets.y,
});
});
// document.querySelector("#child1").addEventListener("mouseenter",function(){
// })
// document.querySelector("#child1").addEventListener("mouseleave",function(){
// gsap.to("#cursor",{
// transform: 'translate(-50%,-50%) scale(0)'
// })
// })
document.querySelectorAll(".child").forEach(function (elem) {
elem.addEventListener("mouseenter", function () {
gsap.to("#cursor", {
transform: "translate(-50%,-50%) scale(1)",
});
});
elem.addEventListener("mouseleave", function () {
gsap.to("#cursor", {
transform: "translate(-50%,-50%) scale(0)",
});
});
});
}
cursorAnimation();