-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
101 lines (76 loc) · 2.39 KB
/
script.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var timeout;
const scroll = new LocomotiveScroll({
el: document.querySelector('#main'),
smooth: true
});
function mouseMoveFunction() {
var xscale = 1;
var yscale = 1;
var xprev = 0;
var yprev = 0;
window.addEventListener("mousemove", function (dets) {
this.clearTimeout(timeout);
var xdiff = dets.clientX - xprev;
var ydiff = dets.clientY - yprev;
xscale = gsap.utils.clamp(.8, 1.2, xdiff);
yscale = gsap.utils.clamp(.8, 1.2, ydiff);
xprev = dets.clientX;
yprev = dets.clientY;
mouseEffect(xscale, yscale);
timeout = this.setTimeout(function () {
document.querySelector(".cursor").style.transform = `translate(${dets.clientX}px,${dets.clientY}px) scale(1,1)`;
}, 100);
});
}
mouseMoveFunction()
function mouseEffect(xscale, yscale) {
window.addEventListener("mousemove", function (dets) {
document.querySelector(".cursor").style.transform = `translate(${dets.clientX}px,${dets.clientY}px) scale(${xscale}, ${yscale})`;
})
}
mouseEffect()
function firstPageAnimation() {
var tl = gsap.timeline();
tl.from("nav", {
y: "-10",
opacity: 0,
duration: 1.5,
ease: Expo.easeInOut
})
.to(".bounding-elem", {
y: 0,
// opacity:0,
duration: 1.5,
ease: Expo.easeInOut,
stagger: .5
})
.from(".hero-bottom", {
y: "10",
opacity: 0,
duration: .7,
ease: Expo.easeInOut
})
}
firstPageAnimation()
document.querySelectorAll(".elem").forEach(function (elem) {
var rotate = 0;
var diffrot = 0;
elem.addEventListener("mousemove", function (details) {
var diff = details.clientY - elem.getBoundingClientRect().top;
diffrot = details.clientX - rotate;
rotate = details.clientX;
gsap.to(elem.querySelector("img"), {
opacity: 1,
ease: Power3,
top: diff,
left: details.clientX,
rotate: gsap.utils.clamp(-20, 20, diffrot)
});
});
elem.addEventListener("mouseleave", function (details) {
gsap.to(elem.querySelector("img"), {
opacity: 0,
ease: Power3,
});
});
});