h3 Drag Resize the window to watch the Burger Grow h3 div class burger

 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
<h3>Drag & Resize the window to watch the Burger Grow 😋 </h3>
<div class="burger">
<div class="bun top">
<div class="sesame-seed one"></div>
<div class="sesame-seed two"></div>
<div class="sesame-seed three"></div>
</div>
<div class="cosmic-fill">
</div>
<div class="bun bottom"></div>
</div>
body {
height: calc(100vh - 40px);
margin: 20px;
background: #f2f2f2;
}
h3 {
text-align: center;
font-family: Courier !important;
font-weight: 700;
}
const button = document.querySelector('button');
const buttonWidth = button.clientWidth;
const buttonHeight = button.clientHeight;
const buttonStyles = button.getBoundingClientRect();
button.addEventListener('mouseenter', mouseEnter);
button.addEventListener('mouseleave', mouseLeave);
function mouseEnter(e) {
// Figure out the co-ordinates of the cursor over the button
// We will trigger the hover animation from that position
const xPercent = ((e.clientX - buttonStyles.left) / buttonWidth) * 100;
const yPercent = ((e.clientY - buttonStyles.top) / buttonHeight) * 100;
// If the cursor is far from the center of the button the hover will be slower since we have more area to fill
// To fix this we increase the animation speed the further you are from the center of the button
let transitionMultiplier = xPercent < 50 ? ((xPercent - 50) * -1) / 50 : (xPercent - 50) / 50;
const speed = 1.3;
const speedBasedOnCursorPosition = speed - ((speed * 0.65 ) * transitionMultiplier);
TweenMax.set('.mask', {
opacity: 1,
attr: {
r: 0,
cx: e.clientX - buttonStyles.left,
cy: e.clientY - buttonStyles.top
}
});
new TimelineMax().to('.mask', speedBasedOnCursorPosition, {
ease: Power4.easeOut,
attr: { r: buttonWidth * 0.4 }
});
}
function mouseLeave() {
const tl = new TimelineMax()
.to('.mask', 0.2, {ease: Power1.easeOut, opacity: 0});
}