-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
56 lines (51 loc) · 1.46 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
var circle = document.querySelector("#circle");
var frams = document.querySelectorAll(".fram");
const lerp = (x, y, a) => x * (1 - a) + y * a;
frams.forEach(fram =>{
fram.addEventListener("mousemove", function(dets){
var dims = fram.getBoundingClientRect();
console.log(dims);
var xstart = dims.x;
var xend = dims.x + dims.width;
var zeroone = gsap.utils.mapRange(xstart, xend, 0, 1, dets.clientX);
gsap.to(circle,{
scale:5,
ease: Expo
})
gsap.to(fram.children,{
color: "#fff",
duration: .4,
y: "-3vw",
ease: Expo
})
gsap.to(fram.children,{
x: lerp(-50, 50, zeroone),
duration: .3
})
})
fram.addEventListener("mouseleave", function(dets){
gsap.to(circle,{
ease: Expo,
scale:1
})
gsap.to(fram.children,{
color: "#000",
duration: .4,
y: 0,
ease: Expo
})
gsap.to(fram.children,{
x: 0,
duration: .3
})
})
})
window.addEventListener("mousemove",function(dets){
// circle.style.transform = `translate(${dets.clientX}px,${dets.clientY}px)`;
gsap.to(circle, {
x: dets.clientX,
y: dets.clientY,
duration: .2,
ease: Expo
})
})