-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
55 lines (50 loc) · 1.29 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
var menu=document.querySelector('#menu');
var bg=document.querySelector('#bg');
// menu.addEventListener('click', function() {
// bg.style.transform='scale(.8)';
// bg.style.borderRadius='20px';
// bg.style.boxShadow='0 150px 45px -100px rgba(0,0,0,0.2)';
// })
var isTransformed = false;
menu.addEventListener('click', function() {
if (isTransformed) {
// Revert back to the original state
bg.style.transform = 'scale(1)';
bg.style.borderRadius = '0';
bg.style.boxShadow = 'none';
} else {
// Apply the transformation
bg.style.transform = 'scale(0.8)';
bg.style.borderRadius = '20px';
bg.style.boxShadow = '0 150px 45px -100px rgba(0,0,0,0.2)';
}
// Toggle the state
isTransformed = !isTransformed;
});
var tl = gsap.timeline();
tl.from('.navitem', {
stagger: 0.3,
duration: 2,
y: 20,
delay: 8,
ease: 'expo.inOut',
opacity: 0
})
.from('#smline', {
width: 0,
duration: 1,
ease: 'expo.inOut',
}, '-=2')
.from('.leftitem', {
stagger: 0.3,
duration: 2,
y: 20,
ease: 'expo.inOut',
opacity: 0
}, '-=2')
.from('#right img', {
duration: 2,
scale: 1.05,
ease: 'expo.inOut',
opacity: 0
}, '-=2');