-
Notifications
You must be signed in to change notification settings - Fork 0
/
gsap-menu-dropdown.js
88 lines (77 loc) · 2.13 KB
/
gsap-menu-dropdown.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
$(".nav_wrap").each(function () {
let hamburgerEl = $(this).find(".nav_hamburger_wrap");
let navLineEl = $(this).find(".nav_hamburger_line");
let menuContainEl = $(this).find(".menu_contain");
let flipItemEl = $(this).find(".nav_hamburger_base");
let menuWrapEl = $(this).find(".menu_wrap");
let menuBaseEl = $(this).find(".menu_base");
let menuLinkEl = $(this).find(".menu_link");
let flipDuration = 0.5;
function flip(forwards) {
let state = Flip.getState(flipItemEl);
if (forwards) {
flipItemEl.appendTo(menuContainEl);
} else {
flipItemEl.appendTo(hamburgerEl);
}
Flip.from(state, { duration: flipDuration });
}
let tl = gsap.timeline({ paused: true });
tl.set(menuWrapEl, { display: "flex" });
tl.from(menuBaseEl, {
opacity: 0,
duration: flipDuration,
ease: "none",
onStart: () => {
flip(true);
}
});
tl.to(navLineEl.eq(0), { y: 4, duration: flipDuration }, "<");
tl.to(navLineEl.eq(1), { y: -4, duration: flipDuration }, "<");
tl.from(menuLinkEl, {
opacity: 0,
yPercent: 50,
duration: 0.2,
stagger: { amount: 0.2 },
onReverseComplete: () => {
flip(false);
}
});
function openMenu(open) {
if (!tl.isActive()) {
if (open) {
tl.play();
hamburgerEl.addClass("nav-open");
} else {
tl.reverse();
hamburgerEl.removeClass("nav-open");
}
}
}
hamburgerEl.on("click", function () {
if ($(this).hasClass("nav-open")) {
openMenu(false);
} else {
openMenu(true);
}
});
hamburgerEl.on("mouseenter", function () {
openMenu(true);
});
menuBaseEl.on("mouseenter", function () {
openMenu(false);
});
menuBaseEl.on("click", function () {
openMenu(false);
});
menuLinkEl.on("click", function () {
if (!$(this).hasClass("no-close")) {
openMenu(false);
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape") {
openMenu(false);
}
});
});